Updating the Changed values in the Editable GridView

Introduction

One of the most common tasks Web developers face is working with tabular data where each column represents a field and each row represents a record and displaying them in the web pages.  Most of the ASP .Net web applications use GridView control to display the tabular data as it lets the users to edit the details. 

This article introduces a simple and effective approach in reading the updated values from the GridView and updating the data source.

Approach

Often in the GridView, we use CommandField to show editing, inserting, or deleting operations in a data-bound control. When there is an update made to the editable grid view, we should capture the changes for that row and same should be altered in the data store attached to this grid view. For this, OnRowUpdating method will be defined to raise the RowUpdating event where we get the data (through GridViewUpdateEventArgs) about the updates. RowUpdating event is typically raised just before an Update to a row begins.

DataControlField class serves as the base class for all data control field types. Data control fields are used by data-bound controls to represent a field of data. Following are the types of DataControlField.

1. BoundField
2. ButtonField
3. CheckBoxField
4. CommandField
5. HyperLinkField
6. TemplateField

DataControlField object that contains the DataControlFieldCell object controls how the cell is rendered by applying styles to the cell. Each cell in the gridview is of type DataControlFieldCell. DataControlField class has a method called “ExtractValuesFromCell” which is used to extract the values from the current row and populate a IDictionary collection.

When the RowUpdating event is raised, if we extract values from the editable cells and we will be able to update the Data source.

Following is the code snippet that extracts the values from the editable cells and loads them in a SortedList dictionary.

SortedList sl = new SortedList();

    GridView gv = (GridView)sender;

    for (int colIndex = 0; colIndex < gv.Columns.Count; colIndex++ )

    {

        DataControlFieldCell cell = gv.Rows[e.RowIndex].Cells[colIndex] as DataControlFieldCell;

        gv.Columns[colIndex].ExtractValuesFromCell(sl, cell, DataControlRowState.Edit, true);

    }

When the collection object is filled with the new values, the key for the DictionaryEntry is the data source field name. This makes our updation to the data source easier by just mapping the Dictionary Key Name with the DataSource field name. In my case, I have considered DataTable as the data source, whereas this works for ObjectDataSource also.

Please find the code snippet to update the DataTable.

DataTable dt = (DataTable)gv.DataSource;

foreach (DictionaryEntry NewValueEntry in sl)

{

        string strValue = NewValueEntry.Value.ToString();

            dt.Rows[e.RowIndex][NewValueEntry.Key.ToString()] = strValue.Trim();

}

There is another approach in getting the new value collection instead of using ExtractValuesFromCell method. GridViewUpdateEventArgs provides 2 collections that contain old and new values for the updated row. This approach was not working in some of my cases as I was using ObjectDataSource for my custom objects.

Conclusion

This brings in code reusability and improves performance. You can consider formatting the values based on the underlying type in the data store.

Happy Coding!!!!