1 Replies - 873 Views - Last Post: 23 May 2012 - 09:36 AM Rate Topic: -----

#1 Ecstatic  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 42
  • Joined: 20-March 11

How can I make Grid Elements clickable?

Posted 20 May 2012 - 02:34 AM

I have a gridview which is displayed like this:

Class Subject Status

someclass sub current

What I want to do is to make 'someclass' clickable. After it is clicked I want to start a session and redirect to some page. The problem is I am not getting how to make it clickable? I have searched a lot about cell click event but I am sill not sure how to use it.

P.S: Language is C#.

Thanks for your help.

This post has been edited by Ecstatic: 20 May 2012 - 02:34 AM


Is This A Good Question/Topic? 0
  • +

Replies To: How can I make Grid Elements clickable?

#2 h4nnib4l  Icon User is offline

  • The Noid
  • member icon

Reputation: 1181
  • View blog
  • Posts: 1,673
  • Joined: 24-August 11

Re: How can I make Grid Elements clickable?

Posted 23 May 2012 - 09:36 AM

On your gridview, set AutoGenerateSelectButton="true" and OnRowDataBound="MyGridView_RowDataBound". This will give you a select column for each row.

Here's the code-behind:
protected void MyGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[0].Attributes.Add("class", "hideSelect");
        e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperLink(MyGridView, "Select$" + e.Row.RowIndex);
    }
}



This adds a CSS class that hides the first cell in each row (the "select" cell), and uses the Row's onclick to get the index of the row, allowing you to click anywhere to select the row. If you set the DataKeyNames attribute to the pertinent information for that class, you can grab the SelectedDayaKey in the SelectedIndexChanged event and do your redirect from there. You'll have to set it the same way OnRowDataBound is set.

The css class that function applies to the select column is simply:

.hideSelect {
    display: none;
}


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1