In this article I will explain how to edit GridView row on double click event in ASP.Net or in other words attached mouse double click event handler to GridView Row in ASP.Net and when the Row is double clicked the Row will be edited.
The idea is to raise the OnRowEditing event handler when a Row is double clicked. And in order to make the GridView Row editable on mouse double click, we will attach the OnRowEditing event handler to the GridView Row using the OnRowDataBound event handler.
You can also read some other interesting articles on GridView:-
HTML Markup
The HTML Markup consists of an ASP.Net GridView with three columns of which two are BoundFields and one is a TemplateField column with Update and Cancel LinkButtons which will be visible when the row is edited.
There is also a Dummy LinkButton which is used for rendering ASP.Net __doPostBack JavaScript function as we will require it for making the Row Clickable by raising PostBack.
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound"
OnRowEditing="OnRowEditing">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
<asp:TemplateField>
<EditItemTemplate>
<asp:LinkButton Text="Update" runat="server" OnClick = "OnUpdate" />
<asp:LinkButton Text="Cancel" runat="server" OnClick = "OnCancel" />
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
Namespaces
You will need to import the following namespaces
C#
VB.Net
Binding the GridView
The GridView is populated using some dummy records using DataTable, you can populate it from database too. I am storing the DataTable in ViewState object as we’ll need it later for updating the GridView row data.
Note: I am hiding the third Column as since we are not using Edit Button to edit rows an empty column would be displayed.
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");
dt.PrimaryKey = null;
ViewState["dt"] = dt;
this.BindGrid();
}
}
protected void BindGrid()
{
GridView1.Columns[2].Visible = false;
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")
dt.PrimaryKey = Nothing
ViewState("dt") = dt
Me.BindGrid()
End If
End Sub
Protected Sub BindGrid()
GridView1.Columns(2).Visible = False
GridView1.DataSource = TryCast(ViewState("dt"), DataTable)
GridView1.DataBind()
End Sub
![Edit GridView Row on Double click in ASP.Net]()
Attaching double click event handler to GridView Row in ASP.Net
In the OnRowDataBound event handler, for each GridView Row a JavaScript double click event handler is attached using the ondblclick attribute. The GetPostBackClientHyperlink method accepts the GridView instance as well as the command with the Row Index of the Row.
Note: GetPostBackClientHyperlink when rendered this gets converted to the JavaScript __doPostBack method that we were discussing earlier.
Doing the above makes each GridView Row clickable and when a GridView Row is double clicked, it executes the OnRowEditing event handler (discussed later).
C#
protected void OnRowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["ondblclick"] = Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Edit$" + e.Row.RowIndex);
e.Row.Attributes["style"] = "cursor:pointer";
}
}
VB.Net
Protected Sub OnRowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Attributes("ondblclick") = Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Edit$" & e.Row.RowIndex)
e.Row.Attributes("style") = "cursor:pointer"
End If
End Sub
OnRowEditing event handler
Below is the OnRowEditing event handler which will be triggered when the GridView Row is double clicked.
Inside the event handler I am setting the GridView EditIndex based on the Index of the row that was double clicked fetched from the GridViewEditEventArgs object.
Also here I am again making the third column visible that was hidden earlier as now we need the Update and Cancel buttons for row updating purposes.
C#
protected void OnRowEditing(object sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
this.BindGrid();
GridView1.Rows[e.NewEditIndex].Attributes.Remove("ondblclick");
GridView1.Columns[2].Visible = true;
}
VB.Net
Protected Sub OnRowEditing(sender As Object, e As GridViewEditEventArgs)
GridView1.EditIndex = e.NewEditIndex
Me.BindGrid()
GridView1.Rows(e.NewEditIndex).Attributes.Remove("ondblclick")
GridView1.Columns(2).Visible = True
End Sub
GridView Row Update and Cancel Edit Events
Below are the event handlers for the Update and the Cancel buttons.
Inside the Update event handler, the values from the TextBoxes are fetched and the DataTable Row is updated and then the DataTable is saved back in ViewState. Finally the GridView is rebind with data.
Inside the Cancel event handler, the GridView EditIndex is set to -1 and the GridView is rebind with data.
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
![Edit GridView Row on Double click in ASP.Net]()
Handling the Event Validation Error
Since we are attaching the event directly to the GridView Row which by default does not have any OnClick event, you might land into the following error.
Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.
To resolve the above error you must set the property EnableEventValidation = "false"
in the @Page Directive as shown below
![Edit GridView Row on Double click in ASP.Net]()
Demo
Downloads
