Making an entire row clickable in a gridview

Question

I have a gridview and I need to make an event fire when a row is clicked.

Is there an existing GridView event I need to bind to to make this happen?

Answer 1

Here's something I prepared earlier:

public class RowClickableGridView : GridView
    {
        public Style HoverRowStyle
        {
            get { return ViewState["HoverRowStyle"] as Style; }
            set { ViewState["HoverRowStyle"] = value; }
        }

        public bool EnableRowClickSelection
        {
            get { return ViewState["EnableRowClickSelection"] as bool? ?? true; }
            set { ViewState["EnableRowClickSelection"] = value; }
        }

        public string RowClickCommand
        {
            get { return ViewState["RowClickCommand"] as string ?? "Select"; }
            set { ViewState["RowClickCommand"] = value; }
        }

        public string RowToolTip
        {
            get
            {
                if (!RowToolTipSet) return string.Format("Click to {0} row", RowClickCommand.ToLowerInvariant());
                return ViewState["RowToolTip"] as string;
            }
            set
            {
                ViewState["RowToolTip"] = value;
                RowToolTipSet = true;
            }
        }

        private bool RowToolTipSet
        {
            get { return ViewState["RowToolTipSet"] as bool? ?? false; }
            set { ViewState["RowToolTipSet"] = value; }
        }

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            foreach (GridViewRow row in Rows)
            {
                if (row.RowType != DataControlRowType.DataRow) continue;

                if (EnableRowClickSelection && row.RowIndex != SelectedIndex && row.RowIndex != EditIndex)
                {
                    if (string.IsNullOrEmpty(row.ToolTip)) row.ToolTip = RowToolTip;
                    row.Style[HtmlTextWriterStyle.Cursor] = "pointer";

                    PostBackOptions postBackOptions = new PostBackOptions(this,
                                                                          string.Format("{0}${1}",
                                                                                        RowClickCommand,
                                                                                        row.RowIndex));
                    postBackOptions.PerformValidation = true;
                    row.Attributes["onclick"] = Page.ClientScript.GetPostBackEventReference(postBackOptions);


                    foreach (TableCell cell in row.Cells)
                    {
                        foreach (Control control in cell.Controls)
                        {
                            const string clientClick = "event.cancelBubble = true;{0}";
                            WebControl webControl = control as WebControl;
                            if (webControl == null) continue;
                            webControl.Style[HtmlTextWriterStyle.Cursor] = "Auto";
                            Button button = webControl as Button;
                            if (button != null)
                            {
                                button.OnClientClick = string.Format(clientClick, button.OnClientClick);
                                continue;
                            }
                            ImageButton imageButton = webControl as ImageButton;
                            if (imageButton != null)
                            {
                                imageButton.OnClientClick = string.Format(clientClick, imageButton.OnClientClick);
                                continue;
                            }
                            LinkButton linkButton = webControl as LinkButton;
                            if (linkButton != null)
                            {
                                linkButton.OnClientClick = string.Format(clientClick, linkButton.OnClientClick);
                                continue;
                            }
                            webControl.Attributes["onclick"] = string.Format(clientClick, string.Empty);
                        }
                    }
                }

                if (HoverRowStyle == null) continue;
                if (row.RowIndex != SelectedIndex && row.RowIndex != EditIndex)
                {
                    row.Attributes["onmouseover"] = string.Format("this.className='{0}';", HoverRowStyle.CssClass);
                    row.Attributes["onmouseout"] = string.Format("this.className='{0}';",
                                                                 row.RowIndex%2 == 0
                                                                     ? RowStyle.CssClass
                                                                     : AlternatingRowStyle.CssClass);
                }
                else
                {
                    row.Attributes.Remove("onmouseover");
                    row.Attributes.Remove("onmouseout");
                }
            }
        }

        protected override void Render(HtmlTextWriter writer)
        {
            base.Render(writer);
            foreach (GridViewRow row in Rows)
            {
                if (row.RowType == DataControlRowType.DataRow)
                {
                    Page.ClientScript.RegisterForEventValidation(row.ClientID);
                }
            }
        }
    }

You then hook into the standard row command events...

Answer 2

Some javascript programming will be required in order to make this happen.

Basically you are going to have to handle the click event for the row(is some browsers the row does not have a click event so you might have to handle the click event of the tds... time to invest in an ajax framework!)

You will then from javascript have to fire a postback with the row index as a parameter. See encosia(a great site for ASP.Net - ajax implementations) on how to do that. Here is a link to an article along those lines

Answer 3

This can be done easily by adding a dummy LinkButton with no Text to the GridView and some code in the RowDataBound . The LinkButton is needed on the page to avoid the Invalid postback or callback argument error. Setting the visibility to false will also cause this error.

The LinkButton also has a CommandArgument with the current row number and a OnCommand event to handle the actual clicking.

<asp:TemplateField>
    <ItemTemplate>
        <asp:LinkButton ID="LinkButton1" runat="server" CommandArgument='<%# Container.DataItemIndex %>' OnCommand="LinkButton1_Command"></asp:LinkButton>
    </ItemTemplate>
</asp:TemplateField>

The OnRowDataBound method

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    //check if the row is a datarow
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //find the linkbutton with findcontrol and cast it back to one
        LinkButton lb = e.Row.FindControl("LinkButton1") as LinkButton;

        //create the correct postback event with the UniqueID property of the linkbutton
        string href = "javascript:__doPostBack('" + lb.UniqueID + "','')";

        //add the onclick event with the correct href to the row
        e.Row.Attributes.Add("onclick", href);

        //to make it visible to the user that the row can be clicked
        e.Row.Attributes.Add("style", "cursor:pointer;");
    }
}

And the Command Method where you can get the CommandArgument from the LinkButton and do all sorts of neat things with it.

protected void LinkButton1_Command(object sender, CommandEventArgs e)
{
    //the row index of the clicked row from the grid if needed
    int rowIndex = Convert.ToInt32(e.CommandArgument);

    //do stuff
}

Answer 4

There is no existing event to handle an entire row click. Your best bet is to have some javascript (maybe via ASP.NET Ajax) detect the click and fire the event yourself. Alternatively you would have to create a button or checkbox that the user selects.

Answer 5

You need to handle the "SelectedIndexChanged" event, you can then query the grid for the .SelectedRow. Alternativley use the "SelectedIndexChanging" event which sets "e.NewSelectedIndex"

Answer 6

Check out this article by Teemu, in where he explains about clicking a row in Gridview and throw the RowClicked event.

Here is a excerpt of the code:

Protected Overrides Sub RaisePostBackEvent(ByVal eventArgument As String)
            If eventArgument.StartsWith("rc") Then
                Dim index As Integer = Int32.Parse(eventArgument.Substring(2))
                Dim args As New GridViewRowClickedEventArgs(Me.Rows(index))
                OnRowClicked(args)
            Else
                MyBase.RaisePostBackEvent(eventArgument)
            End If

        End Sub

 Public Class GridViewRowClickedEventArgs
        Inherits EventArgs

        Private _row As GridViewRow
        Public Sub New(ByVal row As GridViewRow)
            _row = row
        End Sub
        Public ReadOnly Property Row() As GridViewRow
            Get
                Return _row
            End Get
        End Property
    End Class

Btw, it's in VB not C# though.