Multiple user controls and clientid asp.net JS
I am following the post:
开发者_JAVA技巧http://mosesofegypt.net/post/GridView-with-Select-All-CheckBox-using-JQuery.aspx
to create a checkbox column in asp.net gridview with select/deselect all functionality. In my case, the gridview and the javascript (JQuery) code lies inside a dynamically load usercontrol, and there are more than one instances of that user control. The select/deselect functionality works only in the last usercontrol created on page. In other words, the gvProducts.ClientId in the js script knows only about the last gridview. Any ideas how can I get reference to the ClientIds of gridview inside other usercontrol (i.e. other than the last) ? Any help would be most appreciated.
EDIT : This question is essentially the same as asked in this post : Multiple user control instances and ClientID in JS but there are no helping answers for it.
Thanks, Ali
You could add a CssClass to the GridView and base your jQuery selector off of that.
Script:
<script type="text/javascript">
$(function () {
$(".t th input:checkbox").click(function () {
var $checkbox = $(this).closest('table').find(':checkbox:not(:first)');
$checkbox.attr('checked', $(this).attr('checked'));
});
});
</script>
2 tables with the same class name:
<table class="t">
<tr>
<th align="left" scope="col">Category</th>
<th align="left" scope="col">Product</th>
<th align="right" scope="col">Unit Price</th>
<th align="left" scope="col">Supplier</th>
<th scope="col">
<input type="checkbox" name="select-all" />
</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
</table>
<br /><br /><br />
<table class="t">
<tr>
<th align="left" scope="col">Category</th>
<th align="left" scope="col">Product</th>
<th align="right" scope="col">Unit Price</th>
<th align="left" scope="col">Supplier</th>
<th scope="col">
<input type="checkbox" name="select-all" />
</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
</table>
精彩评论