Results 1 to 2 of 2
  1. #1

    Thread Starter
    PowerPoster stanav's Avatar
    Join Date
    Jul 2006
    Providence, RI - USA

    Modify GridView Control to allow Adding Records.

    With Asp.Net 2.0, the GridView control is amazingly powerful for displaying and editing tabular data on a web page. However, its main weakness is the lack of an mechanism to allow the user to add new recodrs directly on the GridView. Luckily, with a little modification, we can have that functionality with the GridView.
    I've seen an article on Code Project doing this using javascript. The problem with this approach is, if you have a master page/content page setting, and your gridview is on the content page, the script won't work properly... However, based on the idea of modifying the control of the article, I came up with a way of doing it via server code instead of relying on javascripts that run on the client side.

    First of all is the select statement... It need to be structured somehow that when the query runs, the returned datatable contains an empty row at row index 0. So we just select an empty row and union with our normal select. The empty row must have the same schema as the table.
    'Note that all the '' within the statement is 2 single quotes (on screen they look like a double quote)
    sqlSelect = "SELECT '' As [fieldA], '' As [fieldB], '' As [fieldC] UNION Select  [fieldA], [fieldB], [fieldC] FROM [tableName]"
    Execute the query and bind the data to your gridview just as you normally do.
    Now we need to handle the RowDataBound event of the GridView. Since we know that hte empty row is on the very top (row zero), so we mainly interested in that row. We check if row(0)'s rowstate = DataControlRowState.Normal then we intercept it, change the text on the Edit linkbutton to "Add", and remove any other controls in the cell. When removing controls, we need to remove them backwards so that the controls index sequence won't get messed up.

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
            If e.Row.RowType = DataControlRowType.DataRow Then
                If e.Row.RowIndex = 0 Then
                    If e.Row.RowState = DataControlRowState.Normal Then
                        Dim lnkBtn0 As LinkButton = CType(e.Row.Cells(0).Controls(0), LinkButton)
                        lnkBtn0.Text = "Add"    'Change the text of Edit LinkButton to "Add"
                        e.Row.Cells(0).Controls.RemoveAt(2) 'Remove the Delete LinkButton
                        e.Row.Cells(0).Controls.RemoveAt(1) 'Remove the space LiteralControl between Edit and Delete 
                    End If
                    'Add confirmation on delete
                    Dim ctrl As Control = e.Row.Cells(0).Controls(2)
                    Dim delBtn As LinkButton = CType(ctrl, LinkButton)
                    If delBtn.Text = "Delete" Then
                        delBtn.Attributes.Add("onclick", "return confirm('WARNING: This action will permanently delete the record. Continue?');")
                    End If
                End If
            End If
        End Sub
    Now, we have to handle the gridview's RowUpdating event. In this event handler, we read the data of each field and store them in a HashTable that has the column names as the keys, and the value is the value for that field.
    After that, we used the hash table to update our database.
    Protected Sub GridView1_RowUpdating(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewUpdateEventArgs) Handles GridView1.RowUpdating
            If e.RowIndex = 0 Then
                'Creating a hashtable and store data to it
                Dim hsh As New System.Collections.Hashtable
                For Each x As System.Collections.DictionaryEntry In e.NewValues
                    hsh(x.Key.ToString) = x.Value
                'Now that we have the data to update our DB in a hashtable.
                'You just need to write a method to update your database using the hash table.
                'As in this code, I have a Sub named AddStoreRecord which takes a hastable as argument and insert a new record to DB.
            End If
        End Sub
    And that's all there is to it....
    Happy programming
    Last edited by stanav; Aug 30th, 2007 at 01:16 PM.

  2. #2
    Fanatic Member ZeBula8's Avatar
    Join Date
    Oct 2002

    Re: Modify GridView Control to allow Adding Records.

    it would have been nice if you explained first what we needed on the gridview to run this example.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts


Click Here to Expand Forum to Full Width

We have made updates to our Privacy Policy to reflect the implementation of the General Data Protection Regulation.