Grid View Edit Records guide, UI Control for ASP.NET AJAX, C#, VB.NET, contains insert, update, delete record in grid row and column

GridView Edit Records in ASP.NET AJAX

Home > How to > Grid Edit Records

The Kettic Data GridView Control for ASP.NET WebForms provides powerful data editing functionalities. GridView users can easily restrict user interaction and data modification as necessary through the properties. Furthermore, it is easy to perform cell editing or data entry for end users at any time they need to manipulate the data. It also offers a very nice interface for end users to edit or insert data via an editor based on data type. There are two ways to edit data items in the asp.net gridview control, one is using the editor to modify the data, the other is using command expression to edit the data items. In this tutorial article, we will introduce you how to define the editing command events in the web grid view using C# language.

Insert Records

Kettic GridView provides two different ways to add new rows into web data grid. One is to add new grid rows into the data source that has been bound to the asp.net GridView project. The other is to programmatically insert new rows to the Rows collection of GridView C# class.
While inserting a record, users always like to use the edit mode as InPlace or EditForms. And for a simplest way is using InsertCommand.
The following code is show you how to enable a insert button in the grid header and insert the input data to the web grid view.
ASPX code:


<kettic:KaxGrid ID="KaxGrid1" runat="server" Width="300px" Skin="MetroBlue"
    OnInsertCommand="KaxGrid1_InsertCommand">
    <MainView EditMode="EditForms" DataKeyNames="SupplierId" CommandItemDisplay="Top">
    </MainView>
</kettic:KaxGrid>

C# code:


protected void KaxGrid1_InsertCommand(object source, GridInsertingEventArgs e)
{
    GridEditableItem editedItem = e.Item as GridEditableItem;
    DataTable dt = GridDataSource;
    DataRow newRow = dt.NewRow();

    DataRow[] allValues = dt.Select("", "SupplierId", DataViewRowState.CurrentRows);
    if (allValues.Length > 0)
    {
        newRow["SupplierId"] = (int)allValues[allValues.Length - 1]["SupplierId"] + 1;
    }
    else
    {
        newRow["SupplierId"] = 1; //the table is empty;
    }
    Hashtable newValues = (Hashtable)e.Values;
    try
    {
        foreach (DictionaryEntry entry in newValues)
        {
            newRow[(string)entry.Key] = entry.Value;
        }
    }
    catch (Exception ex)
    {
        e.Canceled = true;
    }

    dt.Rows.Add(newRow);
}

Update Records

While reading and viewing the asp.net datagrid, you maybe find something wrong in the data record showing up, or want to upgrade some data to make it close to truth. So you need to change some data item in the data source bound to the web gridview. In such case, you can set the gridview row to edit mode. Then the user can change the data in the edit fields, and after clicking the update button in the command template, all the data will be updated through the code below.
ASPX code:


<kettic:KaxGrid ID="KaxGrid1" runat="server" Width="300px" Skin="MetroBlue"
    OnUpdateCommand="KaxGrid1_UpdateCommand">
    <MainView EditMode="EditForms" DataKeyNames="SupplierId">
        <Columns>
            <kettic:GridEditCommandColumn />
        </Columns>
    </MainView>
</kettic:KaxGrid>

C# code:


protected void KaxGrid1_UpdateCommand(object source, GridUpdatingEventArgs e)
{
    GridEditableItem editedItem = e.Item as GridEditableItem;
    DataTable dt = GridDataSource;
    Hashtable newValues = (Hashtable)e.NewValues;
    DataRow[] oldValue = dt.Select("SupplierId=" + newValues["SupplierId"]);

    try
    {
        if (oldValue.Length > 0)
        {
            foreach (DictionaryEntry entry in newValues)
            {
                oldValue[0][(string)entry.Key] = entry.Value;
            }
        }
    }
    catch (Exception ex)
    {
        e.Canceled = true;
    }
}

Delete Records

If you want to delete records in grid view, you can enable automatic delete operation through DeleteCommand. And in the DeleteCommand event, you can writing your own deleting steps in C# code.
ASPX code:


<kettic:KaxGrid ID="KaxGrid1" runat="server" Width="300px" Skin="MetroBlue"
    OnDeleteCommand="KaxGrid1_DeleteCommand">
    <MainView EditMode="EditForms" DataKeyNames="SupplierId">
        <Columns>
            <kettic:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="DeleteColumn" />
        </Columns>
    </MainView>
</kettic:KaxGrid>

C# code:


protected void KaxGrid1_DeleteCommand(object source, GridDeletingEventArgs e)
{
    string id = e.Values["SupplierId"].ToString();
    if (GridDataSource.Rows.Find(id) != null)
    {
        GridDataSource.Rows.Find(id).Delete();
        GridDataSource.AcceptChanges();
    }
}

Please note, all these editing operations are programmatically done using the C# code in the server side. After the editing coding, the asp.net gridview will postback the operation, and the grid view will redraw dynamically in the client side.