Clickable and Double-Clickable GridView in ASP.NET

The following code will make your GridView both single and double clickable. All you have to do is replace the Response.Write lines in the GridView1_RowCommand with anything that you want to do instead. Obviously you can change the styling as you please too.

The GridView

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CssClass="GridViewStyle">        

    <Columns>

        <asp:ButtonField CommandName="SingleClick" Visible="false" />

        <asp:ButtonField CommandName="DoubleClick" Visible="false" />

    </Columns>

    <RowStyle CssClass="GridViewRowStyle" />

    <SelectedRowStyle CssClass="GridViewSelectedRowStyle" />

    <HeaderStyle CssClass="GridViewHeaderStyle" />

    <AlternatingRowStyle CssClass="GridViewAlternatingRowStyle" />

</asp:GridView>

 

The Code-Behind

Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand

    Select Case e.CommandName

        Case "SingleClick"

            Response.Write("Single click detected")

        Case "DoubleClick"

            Response.Write("Double click detected")

    End Select

End Sub

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then

        Dim SingleClickButton As LinkButton = e.Row.Cells(0).Controls(0)

        Dim DoubleClickButton As LinkButton = e.Row.Cells(1).Controls(0)            

        Dim singleClick As String = Page.ClientScript.GetPostBackClientHyperlink(SingleClickButton, "")

        singleClick = singleClick.Insert(11, "setTimeout(""")

        singleClick += """, 300)"

        e.Row.Attributes("onClick") = singleClick

        Dim doubleClick As String = Page.ClientScript.GetPostBackClientHyperlink(DoubleClickButton, "")

        e.Row.Attributes("onDblClick") = doubleClick

    End If

End Sub

 

The Optional CSS Style

<style type="text/css">

.GridViewStyle

{

    border:solid 1px #5D7B9D;

    color:#333333;        

    width:100%;

}

    .GridViewHeaderStyle

    {        

        background-color:#5D7B9D;

         font-weight:bold;

        text-align:left;

        color:White;                                

    }

        .GridViewHeaderStyle a

        {

            color:White;                                                

        }

        .GridViewHeaderStyle:hover

        {                             

        }

    .GridViewRowStyle

    {

        background-color: #F7F6F3;

        color: #333333;

    }

    .GridViewRowStyle:hover

    {

        background-color:Yellow; 

        cursor:pointer;            

    }

    .GridViewAlternatingRowStyle        

    {

        background-color:White;

        color: #284775;

        cursor:pointer; 

    }

    .GridViewAlternatingRowStyle:hover

    {

        background-color:Yellow;

        cursor:pointer; 

    }

.GridViewSelectedRowStyle

{

    background-color:Red;

    font-weight:bold;

}

</style>

The most important part to remember is the two ButtonFields. They should always stay in this order and the rest of your columns should be added after them.

Note: If you get an Event Validation or Invalid Callback or Postback Argument errors you must eiter

Apply this to your web.config to resolve your problem for the entire site

<system.web>

   <pages enableEventValidation="false"/>

</system.web>

or

Add this to the top of every page where you have this GridView

<%@ Page EnableEventValidation="false" %>