How do I get the GridView to render it's Selected Row with and ID instead of a Class

Question

I am using jQuery to cache a references to the selected row in a very large table (500+) records like this:

$selectedItem = $('.GridSelectedItem', $table);

This table is being generated by a GridView with it's SelectedRowStyle set, which gives my row the correct css class. I would like to instead use an ID in the mark up so I can locate the selected row like so:

$selectedItem = $('#GridSelectedItem');

Which is considerably faster. Anyone have a hint on how I can massage the GridView to produce this for me?

Answer 1

I don't think this is possible (maybe it will be possible with the new ClientIdMode of ASP.NET 4.0).

For now, maybe you could use a Repeater instead of the GridView and render the table row (including the ID) by yourself.

Answer 2

I think you need to capture the selected row when SelectedIndexChanged event fires instead of finding it afterwords. Something like:

 protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
 {
    this.HiddenField1.Value = this.GridView1.SelectedIndex.ToString();
 }

And then when you want to use it you would take the row index from the hidden field:

  function findSelectedRow() { 
       var hf = $("#<%= hfSelectedRow.ClientID %>");
       var table = $("#<%= GridView1.ClientID %>"); 
       var row = table[0].rows[hf.val()];
       // do something with the row.
       return false;
    }