In this article I will explain with an example, how to use the RowEditing event of ASP.Net GridView control using C# and VB.Net.
In order to illustrate this concept I will make use of an ASP.Net GridView control on which I’ll perform Edit and Update operations and save the updated data with the temporary DataTable.
HTML Markup
The following HTML Markup consists of an ASP.Net GridView.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowEditing="OnRowEditing">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton Text="Edit" runat="server" CommandName="Edit" />
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton Text="Update" runat="server" OnClick="OnUpdate" />
<asp:LinkButton Text="Cancel" runat="server" OnClick="OnCancel" />
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Namespaces
You will need to import the following namespace.
C#
VB.Net
Populating the GridView with a temporary DataTable
Inside the Page Load event handler of the page, I am first creating a dynamic temporary DataTable object, adding columns to it and then adding some data to the DataTable.
Then this dynamic temporary DataTable is saved in a ViewState variable and finally it is used to populate the GridView control.
Note: You can also make use of Session variable if you need to use the temporary DataTable across the whole application.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
ViewState["dt"] = dt;
this.BindGrid();
}
}
protected void BindGrid()
{
GridView1.DataSource = ViewState["dt"] as DataTable;
GridView1.DataBind();
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
dt.Rows.Add(1, "John Hammond", "United States")
dt.Rows.Add(2, "Mudassar Khan", "India")
dt.Rows.Add(3, "Suzanne Mathews", "France")
dt.Rows.Add(4, "Robert Schidner", "Russia")
ViewState("dt") = dt
Me.BindGrid()
End If
End Sub
Protected Sub BindGrid()
GridView1.DataSource = TryCast(ViewState("dt"), DataTable)
GridView1.DataBind()
End Sub
OnRowEditing event handler
Below is the OnRowEditing event handler which will be triggered for a GridView Row when the edit button inside that row is clicked.
Inside this event handler, I am setting the GridView EditIndex with the NewEditIndex fetched from the GridViewEditEventArgs object and then the GridView is again populated from the temporary DataTable stored inside the ViewState variable.
The above process sets the GridView in Edit Mode.
C#
protected void OnRowEditing(object sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
this.BindGrid();
}
VB.Net
Protected Sub OnRowEditing(sender As Object, e As GridViewEditEventArgs)
GridView1.EditIndex = e.NewEditIndex
Me.BindGrid()
End Sub
GridView OnRowUpdating and Cancel Edit Events
Below are the event handlers for the Update and the Cancel buttons.
Inside the Update event handler, the temporary DataTable is fetched back from the ViewState variable and then the row to be updated is identified using the RowIndex of the GridView Row whose Update button was clicked.
Then the values to be updated are fetched from the TextBoxes and are assigned to the respective columns of the DataTable Row.
Finally the temporary DataTable is saved back in ViewState and the GridView is again populated with the updated temporary DataTable.
Inside the Cancel event handler, the GridView EditIndex is set to -1 and the GridView is populated with data from the temporary DataTable saved in ViewState.
C#
protected void OnUpdate(object sender, EventArgs e)
{
GridViewRow row = (sender as LinkButton).NamingContainer as GridViewRow;
string name = (row.Cells[0].Controls[0] as TextBox).Text;
string country = (row.Cells[1].Controls[0] as TextBox).Text;
DataTable dt = ViewState["dt"] as DataTable;
dt.Rows[row.RowIndex]["Name"] = name;
dt.Rows[row.RowIndex]["Country"] = country;
ViewState["dt"] = dt;
GridView1.EditIndex = -1;
this.BindGrid();
}
protected void OnCancel(object sender, EventArgs e)
{
GridView1.EditIndex = -1;
this.BindGrid();
}
VB.Net
Protected Sub OnUpdate(sender As Object, e As EventArgs)
Dim row As GridViewRow = TryCast(TryCast(sender, LinkButton).NamingContainer, GridViewRow)
Dim name As String = TryCast(row.Cells(0).Controls(0), TextBox).Text
Dim country As String = TryCast(row.Cells(1).Controls(0), TextBox).Text
Dim dt As DataTable = TryCast(ViewState("dt"), DataTable)
dt.Rows(row.RowIndex)("Name") = name
dt.Rows(row.RowIndex)("Country") = country
ViewState("dt") = dt
GridView1.EditIndex = -1
Me.BindGrid()
End Sub
Protected Sub OnCancel(sender As Object, e As EventArgs)
GridView1.EditIndex = -1
Me.BindGrid()
End Sub
Demo
Downloads