Click here to Skip to main content
16,012,468 members
Articles / Web Development / ASP.NET
Article

Extending the default DataGrid (ASP.NET 1.1)

Rate me:
Please Sign up or sign in to vote.
3.25/5 (5 votes)
17 May 20063 min read 67K   19   16
Extending the default DataGrid (ASP.NET 1.1).

Introduction

First of all I want to say sorry for not including in this article the asp.net project, however all the code used is here.Now to our business.

Well since I couldn’t use a different datagrid than the one provided by Microsoft I decided to build a datagrid with some basic functionality. At least delete, insert, update e.t.c. should be supported. So this is my extended datagrid. Please if you have suggestions send me a message. I will appreciate the feedback. And sorry for the not so good writing.

The developed grid is a web server control and is coded in Visual Basic (sorry my C# friends). So let us take it form the beginning. Just start Visual Studio and point to Visual Basic projects and to “Web Control Library”. Let name our project CustomDatagrid. Delete all the default code which is generated by Visual Studio. It is common wisdom that our grid will inherit from the Datagrid so just after the necessary imports define the class inherited form Datagrid.

VB
Imports System.ComponentModel
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Public Class CustomdataGrid
    Inherits DataGrid
End Class

We want also the grid to fire up some events when doing some action and catch those events from the form. These events are commanddelete (for deleting a record), commandedit (for editing a record) and so forth. Moreover we are interested of some properties like CacheString (it is going to be used for caching the datasource), MyDataSource (used to set the datasource as a datatable), deletecolumnNumber (to set which column is the “delete” column). Let's take a look at some

VB
'Declare Events for trapping them from the form
    Public Event CommandDelete(ByRef deleted As Boolean, _
           ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
    Public Event CommandEdit()
    Public Event Cancel()
'For private use
    Private table As New DataTable
    '.....
    Private _MyDataSource As DataTable
    Private _DeleteColumnNumber As Integer
    Public Property DeleteColumnNumber() As Integer
        Get
            Return _DeleteColumnNumber
        End Get
        Set(ByVal Value As Integer)
            _DeleteColumnNumber = Value
        End Set
    End Property
    Public Property MyDataSource() As DataTable
        Get
            Return _MyDataSource
        End Get
        Set(ByVal Value As DataTable)
            _MyDataSource = Value
        End Set
    End Property

We simply want the grid to be render in the beginning so:

VB
'Render the grid
    Protected Overrides Sub Render(ByVal output As System.Web.UI.HtmlTextWriter)
        MyBase.Render(output)
    End Sub

We want ot be able to clear the Cache:

VB
Public Sub ClearCache()
        'Clear cache
        HttpContext.Current.Cache.Remove(_CacheString)
    End Sub

To bind the grid:

VB
Sub BindGrid()
        'bind the grid
        If Not HttpContext.Current.Cache.Get(_CacheString) Is Nothing Then
            Dim dgCache As DataSet
            dgCache = HttpContext.Current.Cache.Get(_CacheString)
            'grid
            Me.MyDataSource = dgCache.Tables(0)
        Else
            'Me.MyDataSource = Me.DataSource.tables(0)
        End If
        Me.DataSource = CreateDataSource()
        Me.DataBind()
        Me.Visible = True
    End Sub

And to handle events like insert, delete, update e.t.c. So the whole class becomes the following:

Class: CustomdataGrid

VB
Imports System.ComponentModel
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Public Class CustomdataGrid
    Inherits DataGrid
    'Declare Events for trapping them from the form
    Public Event CommandDelete(ByRef deleted As Boolean, _
           ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
    Public Event CommandEdit()
    Public Event Cancel()
    Public Event Addrecord(ByRef successfull As Boolean, _
           ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
    Public Event Updaterecord(ByRef successfull As Boolean, _
           ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
    Public Event SetDataSource()
    'For private use
    Private table As New DataTable
    '.....
    Private _MyDataSource As DataTable
    Private _DeleteColumnNumber As Integer
    Private _EditColumnNumber As Integer
    Private _CacheString As String
    'Properties
    Public Property CacheString() As String
        Get
            Return _CacheString
        End Get
        Set(ByVal Value As String)
            _CacheString = Value
        End Set
    End Property
    Public Property EditColumnNumber() As Integer
        Get
            Return _EditColumnNumber
        End Get
        Set(ByVal Value As Integer)
            _EditColumnNumber = Value
        End Set
    End Property
    Public Property DeleteColumnNumber() As Integer
        Get
            Return _DeleteColumnNumber
        End Get
        Set(ByVal Value As Integer)
            _DeleteColumnNumber = Value
        End Set
    End Property
    Public Property MyDataSource() As DataTable
        Get
            Return _MyDataSource
        End Get
        Set(ByVal Value As DataTable)
            _MyDataSource = Value
        End Set
    End Property

    'Render the grid
    Protected Overrides Sub Render(ByVal output As _
                        System.Web.UI.HtmlTextWriter)
        MyBase.Render(output)
    End Sub
    'create the datasoure for the grid
    Function CreateDataSource() As ICollection
        Try
            If _MyDataSource.Rows.Count > 0 Then
                Dim dv As DataView
                dv = _MyDataSource.DefaultView
                CreateDataSource = dv
            Else
            End If
        Catch ex As Exception
            Throw ex
        Finally
        End Try
    End Function
    'inserting a new row in the grid for new record
    Public Sub NewRecord()
        Me.EditItemIndex = 0
        'Move to the first page of the grid
        Me.CurrentPageIndex = 0
        'Hide Delete
        Me.Columns(_DeleteColumnNumber).Visible = False
        'Change the text of the "edit" column
        Dim ecc As EditCommandColumn
        ecc = Me.Columns(EditColumnNumber)
        ecc.UpdateText = "Insert"
        'setting up a private datatable
        Fill()
        'inserting a new row to the datatable
        InsertEmptyRow(table)
        'bind to grid
        Bind()
    End Sub

    Private Function InsertEmptyRow(ByVal dttable As DataTable) As DataTable
        'Insert empty row in the beginning of the grid
        dttable.Rows.InsertAt(table.NewRow(), 0)
        For i As Integer = 0 To dttable.Columns.Count - 1
            dttable.Rows(0).Item(i) = ""
        Next
        Return dttable
    End Function
    Private Sub Fill()
        'please clear tin cache
        ClearCache()
        'Please give me my datasource again in the Cache
        RaiseEvent SetDataSource()
        Dim myds As DataSet
        myds = HttpContext.Current.Cache.Get(_CacheString)
        table = myds.Tables(0)
    End Sub
    Private Sub Bind()
        'Bind the grid to the datasource
        Me.DataSource = table
        Me.DataBind()
    End Sub

    Private Sub CustomdataGrid_PageIndexChanged(ByVal source As Object, _
            ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs) _
           Handles MyBase.PageIndexChanged
        Me.CurrentPageIndex = e.NewPageIndex
        BindGrid()
    End Sub
    Public Sub CustomdataGrid_EditCommand(ByVal source As Object, _
           ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
           Handles MyBase.EditCommand
        '$$$$$$$$
        'I am going to edit the record (do you want something 
        'to be done before that?)
        RaiseEvent CommandEdit()
        '$$$$$$$
        Dim myds As DataSet
        myds = HttpContext.Current.Cache.Get(_CacheString)
        Me.MyDataSource = myds.Tables(0)
        ' begin editing
        Me.EditItemIndex = e.Item.ItemIndex
        'Bind the grid
        BindGrid()
        'Delete should not be visible
        Me.Columns(_DeleteColumnNumber).Visible = False
    End Sub

    Public Sub CustomdataGrid_CancelCommand(ByVal source As Object, _
          ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
          Handles MyBase.CancelCommand
        'Please clear the cache
        ClearCache()
        'I am going to cancel (do you want something to be done before that?)
        RaiseEvent Cancel()
        'Please give me my datasource again
        RaiseEvent SetDataSource()
        Me.EditItemIndex = -1
        'Bind the grid
        BindGrid()
        'Delete should be visible now
        Me.Columns(_DeleteColumnNumber).Visible = True
        'Change the column text
        Dim ecc As EditCommandColumn
        ecc = Me.Columns(_EditColumnNumber)
        ecc.UpdateText = "Update"
    End Sub

    Public Overridable Sub CustomdataGrid_DeleteCommand(ByVal source As Object, _
          ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
          Handles MyBase.DeleteCommand
        Dim isLastOfThePage As Boolean
        'Is this the last record?
        If Me.Items.Count = 1 Then
            isLastOfThePage = True
        End If
        Dim isdeleted As Boolean
        'To know if the record has been deleted
        '$$$$$
        'Please delete the record
        RaiseEvent CommandDelete(isdeleted, e)
        '$$$$$
        If isdeleted Then
            'Deleted succesfully so lets go now
            If isLastOfThePage Then Me.CurrentPageIndex = 0
            'clear cache
            ClearCache()
            Me.EditItemIndex = -1
            'Give me my know datasource
            RaiseEvent SetDataSource()
            'Bind the grid
            BindGrid()
            'Delete is now visible
            Me.Columns(_DeleteColumnNumber).Visible = True
        End If
    End Sub

    Private Sub CustomdataGrid_UpdateCommand(ByVal source As Object, _
            ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
            Handles MyBase.UpdateCommand
        Dim successfull As Boolean
        Dim myds As DataSet
        Dim mydataTable As DataTable
        myds = HttpContext.Current.Cache.Get(_CacheString)
        mydataTable = myds.Tables(0)
        Me.MyDataSource = myds.Tables(0)
        If _MyDataSource.Rows(e.Item.ItemIndex).RowState = _
                         DataRowState.Added Then
            'New record - add it please
            RaiseEvent Addrecord(successfull, e)
        Else
            'update record - update it please
            RaiseEvent Updaterecord(successfull, e)
        End If
        If successfull Then
            'All done succesfully
            Me.EditItemIndex = -1
            'clear cache
            ClearCache()
            'Give me my new datasource
            RaiseEvent SetDataSource()
            'Bind the grid
            BindGrid()
            'Delete is now visible
            Me.Columns(_DeleteColumnNumber).Visible = True
            'Change the edit column text
            Dim ecc As EditCommandColumn
            ecc = Me.Columns(_EditColumnNumber)
            ecc.UpdateText = "Update"
        End If
    End Sub
    Public Sub ClearCache()
        'Clear cache
        HttpContext.Current.Cache.Remove(_CacheString)
    End Sub
    Sub BindGrid()
        'bind the grid
        If Not HttpContext.Current.Cache.Get(_CacheString) Is Nothing Then
            Dim dgCache As DataSet
            dgCache = HttpContext.Current.Cache.Get(_CacheString)
            'grid
            Me.MyDataSource = dgCache.Tables(0)
        Else
            'Me.MyDataSource = Me.DataSource.tables(0)
        End If
        Me.DataSource = CreateDataSource()
        Me.DataBind()
        Me.Visible = True
    End Sub
End Class

Please note that when an action occurs our grid fires some events that should be cached from the form. Like the “SetDataSource” which as it says sets the datasource. Now that we are done just build the project and the custom grid is ready for production. Now let us use it in a simple project. Create a new web project and reference the grid. Select "add existing project" to the solution and add the grid project. To add the grid in the web form just register it:

ASP.NET
<%@ Register TagPrefix="MyGrid" Namespace="CustomDataGrid" 
Assembly="CustomDataGrid" %> 

And add it to the page:

ASP.NET
<MyGrid:CustomDataGrid 
id="CustomdataGrid1" runat="server"></MyGrid:CustomDataGrid>

Next set some columns (delete and insert columns too). Let's say we will add three columns categoryid, categoryname and description and the edit and delete column. Don’t forget to clear the “Create columns automatically at run time”. There are some basic things which we have to point if we want to use this grid. First of all every time we load the web form we must set the numbers of the delete, edit columns, the string in which name we will store the datasource in cache and to bind the grid if there is already a datasource.

VB
Private Sub Page_Load(ByVal sender As System.Object, _
             ByVal e As System.EventArgs) Handles MyBase.Load
        'Put user code to initialize the page here
        If Not IsPostBack Then
            'Do something here
        End If
        'set grid
        SetGrid()
    End Sub

'Setting the grid
    Private Sub SetGrid()
        Me.CustomdataGrid1.EditColumnNumber = 3 'the number of the edit column
        Me.CustomdataGrid1.DeleteColumnNumber = 4 'the number of the delete column
        Me.CustomdataGrid1.CacheString = xxxxxx 'xxx: Cachestring
        If Not Cache(xxxx) Is Nothing Then
            Dim myds As DataSet
            myds = Cache(xxxxx) 'xxx: Cachestring
            Me.CustomdataGrid1.MyDataSource = myds.Tables(0)
        End If
    End Sub

Notice that we clear the cache, then get the datasource (for example a select statement (which will also handle the CustomdataGrid1.SetDataSource event) and inside there we will cache the datasource and the we bind the grid. A typical GetDataSource function would be:

VB
Private Sub GetDatSource() _
                 Handles CustomdataGrid1.SetDataSource
        Try
            'Here the code for getting the datasource
            If xxxxx Then  'if we got the datasource
                '!!!!!!!!!!!!!!!!!!!!!!!
                'Inserting into cache
                Cache.Insert("xxxxx", myds, Nothing, _
                     DateTime.Now.AddMinutes(15), TimeSpan.Zero)
                'xxx: Cachestring
                'myds: the dataset
            Else
                myds = Cache("xxx") 'here the cachestring
            End If

        Catch ex As Exception

        Finally
        End Try
    End Sub

Following the same we write functions for the events thrown by the grid:

VB
Private Sub Cancel() Handles CustomdataGrid1.Cancel
        'Something here
    End Sub
    Private Sub Edit() Handles CustomdataGrid1.CommandEdit
        'Something here
    End Sub
    Private Sub Delete(ByRef Deleted As Boolean, _
            ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
            Handles CustomdataGrid1.CommandDelete
        If ‘delete the record here Then
            Deleted = True
        Else
            Deleted = False
        End If
    End Sub

    Private Sub AddsRecord(ByRef successfull As Boolean, ByVal e As _
            System.Web.UI.WebControls.DataGridCommandEventArgs) _
            Handles CustomdataGrid1.Addrecord
        If ‘Add the record here Then
            successfull = True
        End If
    End Sub

    Private Sub Updaterecord(ByRef successfull As Boolean, ByVal e As _
            System.Web.UI.WebControls.DataGridCommandEventArgs) _
            Handles CustomdataGrid1.Updaterecord
        If ‘Update the record here Then
            successfull = True
        End If
    End Sub

And a find button to get the datasource

VB
Private Sub find_Click(ByVal sender As System.Object, _
             ByVal e As System.EventArgs) Handles find.Click
        'clear cache
        Me.CustomdataGrid1.ClearCache()
        GetDatSource()
        'bind the grid
        Me.CustomdataGrid1.BindGrid()
    End Sub

That was all. Please let me remind you again I am waiting for your suggestions. If you have any please send me a message.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Greece Greece
Antonis has a background in VB development and has now converted to .NET , coding in VB .Net for the retailers markets industry. He is Mcp and holds 70-229 and 70-306 certifications.

Comments and Discussions

 
GeneralCustom DataGrid in Windows Forms Pin
SannQuest25-May-06 5:37
SannQuest25-May-06 5:37 
GeneralRe: Custom DataGrid in Windows Forms Pin
Settas Antonis25-May-06 20:05
Settas Antonis25-May-06 20:05 
GeneralRe: Custom DataGrid in Windows Forms Pin
SannQuest26-May-06 3:22
SannQuest26-May-06 3:22 
QuestionWhy .NET 1.1 ? Pin
Peter.Chan23-May-06 22:00
Peter.Chan23-May-06 22:00 
AnswerRe: Why .NET 1.1 ? Pin
Settas Antonis23-May-06 22:15
Settas Antonis23-May-06 22:15 
Generaladd customgrid Pin
bilaltepe19-May-06 11:30
bilaltepe19-May-06 11:30 
GeneralRe: add customgrid Pin
Settas Antonis19-May-06 11:38
Settas Antonis19-May-06 11:38 
GeneralRe: add customgrid Pin
bilaltepe24-May-06 10:47
bilaltepe24-May-06 10:47 
GeneralRe: add customgrid [modified] Pin
Settas Antonis24-May-06 19:55
Settas Antonis24-May-06 19:55 
GeneralRe: add customgrid [modified] Pin
bilaltepe24-May-06 23:44
bilaltepe24-May-06 23:44 
GeneralRe: add customgrid [modified] Pin
Settas Antonis25-May-06 0:57
Settas Antonis25-May-06 0:57 
GeneralRe: add customgrid [modified] Pin
bilaltepe25-May-06 1:06
bilaltepe25-May-06 1:06 
GeneralRe: add customgrid [modified] Pin
bilaltepe25-May-06 6:42
bilaltepe25-May-06 6:42 
GeneralRe: add customgrid [modified] Pin
Settas Antonis25-May-06 20:02
Settas Antonis25-May-06 20:02 
GeneralRe: add customgrid [modified] Pin
Aychu30-May-06 3:44
Aychu30-May-06 3:44 
GeneralRe: add customgrid [modified] Pin
BalasahebK23-Jun-06 9:11
BalasahebK23-Jun-06 9:11 
hello, Settas,

I followed all ur instructions, but could not successfully run project.
After creating customdatagrid, I created web project as Datagridtest
afterwords, on WebForm1 I register CustomDatagrid project as u said <%@ Register TagPrefix="MyGrid" Namespace="CustomDataGrid" Assembly="CustomDataGrid" %>
Further, I added this line <mygrid:customdatagrid id="CustomDatagrid1" runat="server"> between tag

Giving error Error Creating Control- CustomDatagrid1

Why it is giving this error,I'm not getting, Please help me soon

Can u upload ur project

Balasaheb
Software Developer
Platform: Asp.net,vb.net
Database: SQL Server 2000

-- modified at 15:13 Friday 23rd June, 2006

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.