Creating Custom GridView Control
page 1 of 6
Published: 17 Nov 2008
Abstract
In this article, Abdulla examines the creation of a new custom GridView control from scratch, which allows the developer to include a checkbox column to the GridView control automatically with embedded JavaScript code to check/uncheck the checkbox column without the need to write any bit of code. He begins with comprehensive coverage of the steps involved in customization of the GridView class and implementation of template classes. Towards the end of the article, Abdulla examines the usage of the control with Visual Studio 2005. The article also covers how to embed a JavaScript file with a custom control and how to use it later on with the help of detailed analysis, relevant source code, and screenshots.
by Abdulla Hussein AbdelHaq
Feedback
Average Rating: 
Views (Total / Last 10 Days): 4115/ 432

Customizing the GridView Class

I recommend that you download the source code from the link given at the end of the article, which contains the code of the custom control with a sample website; you can look at it in more details.

Let us begin creating our new custom GridView control, open your Visual Studio then create a new Class library project and name it as "MyCustomControl."

First of all, you have to add some references to allow you to use the needed namespaces and classes, below are the needed references:

1.    System.Design

2.    System.Drawing

3.    System.Web 

4.    System.Web.Extensions 

5.    System.Web.Extensions.Design

Then create a new class and name it "CustomGrid."

Inheriting the GridView class is much better than creating a new databound control from scratch, that give us the benefits of functions and subroutines already existing in the GridView class.

Listing 1

<Assembly: TagPrefix("MyCustomControl.CustomsControls", "asp")> 
<Assembly: WebResource("MyCustomControl.CustomGridJS.js", "text/javascript")> 
Namespace CustomsControls
<ToolboxData("<{0}:CustomGrid runat=""server""></{0}:CustomGrid>")> _
Partial Public Class CustomGrid
Inherits GridView
'My Code Here
End Class

We will create a property for including the checkbox column to allow the developer to add the column automatically, which is implemented in Listing 2.

Listing 2

''' <summary>
''' Add checkbox column to the gridview.
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
<Category("Behavior")> _
          <Description("Add checkbox column to the gridview.")> _
          <DefaultValue(False)> _
          Public Property IncludeColumnCheckBox() As Boolean
  Get
  If String.IsNullOrEmpty(ViewState("IncludeColumnCheckBox")) Then
    Return False
  Else
    Return DirectCast(ViewState("IncludeColumnCheckBox"), Boolean)
  End If
  End Get
  Set(ByVal Value As Boolean)
  ViewState("IncludeColumnCheckBox"= Value
  End Set
End Property

Now we will override the CreateColumns function which is responsible for creating the columns, and there we will add our new checkbox column, as in Listing 3.

Listing 3

Protected Overrides Function CreateColumns(ByVal dataSource As PagedDataSource, _
ByVal useDataSource As BooleanAs ICollection
Dim columnList As ICollection = MyBase.CreateColumns(dataSource, useDataSource)
  If Not IncludeColumnCheckBox Then
    Return columnList
  End If
  Dim list As ArrayList = New ArrayList(columnList)
  Dim _CheckBoxColumn As New MyTemplateField
  list.Insert(0, _CheckBoxColumn)
  Return list
End Function

You may note that I am declaring an object from a template class that I created before I called MyTemplateField, and that the GridView column consisted from the set of templates classes (Header, Item, Alternate and footer).

I will illustrate these templates classes in the Implementing Templates classes section,

Developers do not need to write multi lines of code to get the ID's of the selected rows; we will return these ID's simply by writing a new property called GetCheckedRows which is shown below.

Listing 4

''' <summary>
''' Return list of IDs joined with ',' separators
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
<Browsable(False)> _
           Public ReadOnly Property GetCheckedRows() As String
  Get
  Dim _collectionIds As String = String.Empty
  If DataKeys.Count > 0 Then
 
    For i As Integer = 0 To Rows.Count - 1
      If Rows(i).RowType = DataControlRowType.DataRow Then
        If DirectCast(Rows(i).FindControl("ChkItem"), CheckBox).Checked Then
          If _collectionIds = String.Empty Then
            _collectionIds = DataKeys(Rows(i).RowIndex).Value
          Else
            _collectionIds & = "," & DataKeys(Rows(i).RowIndex).Value
          End If
        End If
      End If
    Next
  End If
  Return _collectionIds
  End Get
End Property

View Entire Article

Article Feedback

Title:  
Name:  
Url: ( Optional )
Comment:  
Please add 7 and 1 and type the answer here:

User Comments

Title: Excellent Article   
Name: Cebo
Date: 11/20/2008 2:20:05 PM
Comment:
This article of example project of gridview with checkbox is very well written and deserves 5-stars!

Product Spotlight
Product Spotlight 
Learn More
.NET Tools
asp.net shopping cart
asp.net chart control






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2009 ASPAlliance.com  |  Page Processed at 1/7/2009 11:27:58 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search