Editable DataGrid Binding - VS 2003 RAD approach (ASP.NET 1.1) - EditGrid

• Download source code - 21.6 KB

Introduction

This article outlines the fastest and simplest way to develop an ASP.NET 1.1 editable DataGrid using Visual Studio 2003.

Making an EditGrid

This article assumes a DataSet has been added to your page from the toolbox or an adapter. See http://vsnetdatabinding.blogspot.com/ for info on adding a DataSet and Adapter to your page.

1. Drag/Drop a DataGrid

Drag a DataGrid from the Toolbox onto your form.

2. Set the Datasource

Right click the DataGrid and click Property Builder.

Set the DataSource, DataMember, and DataKey fields to the DataSet on your page.

3. Add an EditCommandColumn

Switch to the Columns tab. Add the Edit, Update, and Cancel button columns.

4. (Optional) Create TemplateColumns for custom editors

If you need any non-label textbox controls, then you will need to create template columns. In this example, we have a boolean column, so we will add a checkbox control template. In order to keep the template column from being duplicated automatically, unselect the Create Columns Automatically checkbox and add every column to the Selected Columns list. Select the column needing a custom editor and click Convert this column into a Template Column. Click Ok to exit the Property Builder.

Right click on the grid and select Edit Template. Select the template column you just converted.

Delete the textbox in the EditItemTemplate. Drag/drop the appropriate control into the EditItemTemplate from the Toolbox. Bind the control's Value property to the appropriate Container/Data Item/Column. In this example, the CheckBox's Checked property is bound to the ClockedIn column.

If you also desire a non-editable display other than text, then follow the above procedure for the ItemTemplate. In this example, the Label is replaced with a CheckBox. The CheckBox's Enabled property is then set to false to disallow edits.

To exit Template Edit mode, right click on the grid and select End Template Editing.

Let's Write Some Code

5. Fill/Cache/Retrieve your dataset

Do this on the page load. On no postback, you will fill and cache the dataset. On postback, you will retrieve the cached dataset.

Private Sub Page_Load(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Load

    If Not Me.IsPostBack Then

        'Fill values into your dataset.
        'If using a database data source, replace this "With" block 
    'with your adapter.fill
        With Me.DatasetEditGrid1.EditGrid
            .AddEditGridRow("Robert", "Site 1", True)
            .AddEditGridRow("Bill", "Site 2", False)
            .AddEditGridRow("Joe", "Site1", True)
        End With

        'Cache dataset. (You can also use session to cache)
        Me.ViewState("DatasetEditGrid1") = Me.DatasetEditGrid1
    Else
        'Point to the cached dataset.
        Me.DatasetEditGrid1 = CType(Me.ViewState("DatasetEditGrid1"), _
     DatasetEditGrid)
    End If
End Sub

6. Create an EditCommand handler

Switch to the code-behind and add an EditCommand handler for the DataGrid.

Set the EditItemIndex here.

Private Sub DataGrid1_EditCommand(ByVal source As Object, _
    ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
    Handles DataGrid1.EditCommand

    Me.DataGrid1.EditItemIndex = e.Item.ItemIndex
End Sub

7. Create a CancelCommand handler

Reset the EditItemIndex (-1 denotes no EditItem).

Private Sub DataGrid1_CancelCommand(ByVal source As Object, _
        ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
        Handles DataGrid1.CancelCommand
    Me.DataGrid1.EditItemIndex = -1
End Sub

8. Create an UpdateCommand handler

Copy the generic SetDatasetValuesFromGrid reverse binding code. You should add a new ElseIf section for each type of control you will be using in the grid. This instance handles TextBoxes and CheckBoxes.

'Generic Code to do Reverse binding from a DataGridItem cell to its
'corresponding DataTable item.
Private Sub SetDatasetValuesFromGrid(ByVal DataTable As DataTable, _
        ByVal DataTableColumnName As String, _
        ByVal DataGridItem As DataGridItem, _
        ByVal DataGridCellIndex As Integer)

    For Each control As Control In DataGridItem.Cells(DataGridCellIndex).Controls
        If TypeOf control Is CheckBox Then
            Me.DatasetEditGrid1.EditGrid(DataGridItem.DataSetIndex)(DataTableColumnName) _
        = CType(control, CheckBox).Checked
            Exit For
        ElseIf TypeOf control Is TextBox Then
            Me.DatasetEditGrid1.EditGrid(DataGridItem.DataSetIndex)(DataTableColumnName) _
        = CType(control, TextBox).Text
            Exit For
        End If
    Next
End Sub

Call the SetDatasetValuesFromGrid for each cell in the edit row. Use an enum to correlate the dataset column names to the grid's column indexes. Save the dataset to your datasource using an adapter.update (not done in this example). Reset the EditItemIndex.

Private Sub DataGrid1_UpdateCommand(ByVal source As Object, _
    ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
    Handles DataGrid1.UpdateCommand
        
UpdateDatasetFromGrid()
    Me.DataGrid1.EditItemIndex = -1
End Sub

'Relate the Dataset's Column Names to the Column Index in the Datagrid
Private Enum DatasetColumnNameToGridColumnIndex
    Name = 1
    Location = 2
    ClockedIn = 3
End Enum

'Reverse bind from the datagrid to the dataset.
Private Sub UpdateDatasetFromGrid()
    For Each ColName As DatasetColumnNameToGridColumnIndex _
In System.Enum.GetValues(GetType(DatasetColumnNameToGridColumnIndex))
        SetDatasetValuesFromGrid(Me.DatasetEditGrid1.EditGrid, ColName.ToString, _
    Me.DataGrid1.Items(Me.DataGrid1.EditItemIndex), ColName)
    Next

    'Normally you would save (adapter.update) to the database here.
End Sub

9. Bind the crid (Very important!)

Bind the grid in the PreRender event to ensure the most recent dataset changes are reflected in the grid.

Private Sub DataGrid1_PreRender(ByVal sender As Object, _
            ByVal e As System.EventArgs) Handles DataGrid1.PreRender
    'Bind the Grid.
    Me.DataGrid1.DataBind()
End Sub

Conclusion

After following these steps, you can run the application and test the results. Please comment on anything that needs further clarification, or with any questions on implementing this. Also, please provide suggestions before rating the article less than a 5.

Enjoy!