ASP.NET Gridview use 'onRowClick' to display record's Details (instead of Details/Select Button)

Question

Ok so I have a gridView

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
     RowStyle-CssClass="td" HeaderStyle-CssClass="th"
    CellPadding="6" DataKeyNames="ID" ShowFooter="true">

     <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Date" HeaderText="Date" />
        ......
         <asp:TemplateField>
           <ItemTemplate>
             <asp:Button ID="lnkDetails" runat="server" Text="Details" OnClick="DetailsView" CommandName="DetailsCommand"></asp:Button>
           </ItemTemplate>
        </asp:TemplateField>
     </Columns>

As you can see I have configured the "lnkDetails" button so that on click fires off the DetailsView() function which then calls an "SqlCommand" and binds the data to an "asp Repeater" essentially displaying a custom "Details View" of the selected record.

 Protected Sub DetailsView(ByVal sender As Object, ByVal e As EventArgs)

        Dim con As New SqlConnection
        Dim cmd As New SqlCommand

        con.ConnectionString = ConnectionString() 'Thats a function
        con.Open()
        cmd.Connection = con
        cmd.CommandText = "SELECT FROM... WHERE ID=" & id & ""

        ....

        Repeater1.DataSource = cmd.ExecuteReader()
        Repeater1.DataBind()
 End Sub

Fairly straight forward Right?

Now all I want to do (UI -wise) is allow users to fire that click event by selecting the record's (entire) row instead of the details button. Which I then want to hide.

I am pretty sure you can do that either from the .aspx page with jquery (onRowClick go & click the details button) or from code behind, I just haven't found a solution that works for me yet. Any thoughts?

Answer 1

Well I manage to resolve this simple but fiddly task. In the end I did re-purpose the solution in the other post mentioned by Andrei. Here's what I came up with:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs) Handles GridView.RowDataBound
    If e.Row.RowType = DataControlRowType.DataRow Then
        e.Row.Attributes.Add("onclick", Page.ClientScript.GetPostBackEventReference(GridView1, "Select$" + e.Row.RowIndex.ToString()))
    End If
End Sub

Protected Sub GridView1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles GridView1.SelectedIndexChanged
    Try
        FillDetailsView(GridView1.SelectedIndex)
    Catch
        '...
    End Try
End Sub


Protected Sub FillDetailsView(RecordIndex)

    Dim id = GridView1.DataKeys(RecordIndex).Value

    'By passing the Row Index here and using the GridView's DataKey which is pointing to the record's ID field
    'I am ready to go to work

End Sub

Felipe your's is an interesting example aswell though less applicable to my current code (..and my postbacks)

Thanks to all you guys for your pointers !

Answer 2

check this exemple:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:ButtonField CommandName="click" Text="Click" Visible="False" />
                <asp:BoundField DataField="IDcontato" HeaderText="ID" />
                <asp:BoundField DataField="nome" HeaderText="Name" />
            </Columns>
            <SelectedRowStyle BackColor="#FFFF66" Font-Bold="True" />
        </asp:GridView>

Create the button field and turn it's visibility to false. On the code behind, you can do as follows:

  Protected Overrides Sub Render(writer As HtmlTextWriter)
        For Each row As GridViewRow In GridView1.Rows
            'You have register the events so it wont fire any event validation errors on rutime
            If row.RowType = DataControlRowType.DataRow Then
                Page.ClientScript.RegisterForEventValidation(row.UniqueID & "$ctl00")
            End If
        Next

        MyBase.Render(writer)
    End Sub

    Protected Sub GridView1_RowCommand(sender As Object, e As GridViewCommandEventArgs) Handles GridView1.RowCommand
        'Capture the event and do what you want
        Dim _commandName As String = e.CommandName

            Select (_commandName)
            'filter by command name, so you can have multiple events for each row
            Case ("click")
                'do something
                Dim _gridView As GridView = CType(sender, GridView)
                Dim _Index As Integer = e.CommandArgument.ToString()
                _gridView.SelectedIndex = _Index


        End Select

    End Sub

    Protected Sub GridView1_RowCreated(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowCreated
        If e.Row.RowType = DataControlRowType.DataRow And e.Row.RowState <> DataControlRowState.Selected Then
            'Set the apropriate css for the rows
            e.Row.Attributes.Add("onmouseover", "this.style.cursor='hand';")
            e.Row.Attributes.Add("onmouseout", "this.style.cursor='pointer';")
        End If
    End Sub


    Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound

        'Capture the button event and set it for the entire row
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim _ClickButton As LinkButton = CType(e.Row.Cells(0).Controls(0), LinkButton)
            e.Row.Attributes("onclick") = ClientScript.GetPostBackClientHyperlink(_ClickButton, "")

        End If

    End Sub

I hope it helps.