Find control inside Asp.net GridView using jQuery

In this post, find jQuery code and explanation to "find control inside ASP.NET GridView". Why it is tricky? The reason is ID of control's placed inside ASP.NET Gridview get changed at the time of rendering. Till ASP.NET 3.5, the rendered client-side id is formed by taking the Web control's ID property and prefixed it with the ID properties of its naming containers.

In short, a Web control with an ID of txtFirstName can get rendered into an HTML element with a client-side id like "ctl00_MainContent_txtFirstName". And same is true for ASP.NET GridView.

Suppose, there is textbox and label control in gridview.

<ItemTemplate>
   <asp:TextBox ID="txtID" runat="server" />
   <asp:Label ID="lblID" runat="server" />
</ItemTemplate>

And when you run this, this is rendered as below.

<input name="gdRows$ctl02$txtID" type="text" id="gdRows_ctl02_txtID" />
<span id="gdRows_ctl02_lblTest"></span>

As you notice, the ID of the control is changed. It is no more "txtID" or "lblID". Gridview ID and control number is added as prefix. So now how do you select these controls?

Related Post:

• Download ASP.NET GridView & jQuery Tips and Tricks eBook


• Common jQuery Mistakes


• ASP.NET GridView and jQuery

To select all label which has ID as "lblID".

$('#<%=gdRows.ClientID %>').find('span[id$="lblID"]').text('Your text.');

To select particular label control out of all the labels which ends with "lblID".

var $arrL = $('#<%=gdRows.ClientID %>').find('span[id$="lblID"]');
var $lbl = $arrL[0];
$($lbl).text('Your text...');

Similarly, you can also find textbox. To select all textbox which has ID as "txtID".

$('#<%=gdRows.ClientID %>').find('input:text[id$="txtID"]').val('Your value.');

To select particular textbox control out of all the textboxes which ends with "lblID".

var $arrT = $('#<%=gdRows.ClientID %>').find('input:text[id$="txtID"]');
var $txt = $arrT[0];
$($txt).val('text...');

Feel free to contact me for any help related to jQuery, I will gladly help you.