asp.net gridview tr id unique for jQuery

Question

Hi

I have created a ASP.NET WebForms Gridview and I need to access each row (e.g. the <TR>) of the table in javascript/jquery.... Unfortunately it looks like the <tr>'s generated by the gridview all have the same ID!

Is there a way to change this? Any ideas how I could access a particular row in javascript (basically I am trying to call a method and pass it the row id that it needs to access).

--- More Info ---

 <asp:GridView ..>
    <Columns>
      <asp:Templatefield>
        <ItemTemplate>
          <asp:DropDownList onchange="javascript:EnableControls('ROWIDHERE')">
          </asp:DropDownList>
        </ItemTemplate>
      </asp:TemplateField>
    </Columns>
</asp:GridView>

Its the one change of the dropdownlist that needs to know what row its on!

Answer 1

If you let jQuery manange your handlers, you could do something like this using .closest().

$('select').change(function() {
    var $tr = $(this).closest('tr'); 
    // do something with the row
});

This will traverse the ancestors until you get to the <tr>.

If you wanted to stay with the inline handlers, then try something like this:

<asp:DropDownList onchange="javascript:EnableControls(this)">

function EnableControls(elem) {
    var $tr = $(elem).closest('tr'); 
}

Answer 2

Can you post the example code for the gridview so that we can compare the templates?

One option of the top of my head would be to give each a class element which uses an inline code block to assign a unique class based on the index for instance. Here's an example:

<tr class='uniqueClass<%# Container.DataItemIndex %>'>

This way your elements would be produced as

<TR class='uniqueClass0' />
<TR class='uniqueClass1' />
<TR class='uniqueClass2' />

From here, you can then identify the you require in jquery by simply using

var rowIndexRequired = 1;
var requireRow = $('.uniqueClass'+rowIndexRequired);

If you provide more detail then I can help further.

Answer 3

Hey,

You can always access it top down via:

$("#<%= GridView1.ClientID %>").find("tr:eq(0)")

or use parents to search up:

//this reference to element
$(this).parents("tr:first")

HTH.

Answer 4

If your requirement is a control inside the row that needs to reference the row, can't you just use something like this:

$(".myControlClass").parents("tr")

to reference the row? You control would have a class assigned to it so you can select it that way. I don't know what the markup looks like, but this may be a good start.