I have kendo grid. The first column of the grid has check boxes and header has select all check box.
Expected Behavior
Probably We have seen this behavior on several web sites. when user clicks on select all, then all the check boxes should get selected. If user unchecked select all then all the check boxes should get unselected. In addition if user select or unselect individual check box in the row then "select all" check box should also get toggled based on how many check boxes are selected.
I copied the grid as it is from rendered HTML. ( and removed some extra columns) and attached javascript functions.
Issue
There are 2 click events attached in document ready function. One for the select all check box and other for check boxes in each row. Below is my code snippet. If you run the code then its working here exactly as i wanted. However the same code is not working on my machine. When i debug i found, the click event for the check boxes in rows never get fired. Not sure why its working here but not my machine. I'm using IE 10
$("#assetImportDetail th input:checkbox").click(
function () {
$("#assetImportDetail td input:checkbox").prop("checked", $(this).prop("checked"));
}
);
$("#assetImportDetail tbody input:checkbox").click(
function () {
var checkedCount = $("#assetImportDetail td input:checkbox:checked").length;
var totalCount = $("#assetImportDetail td input:checkbox").length;
$("#assetImportDetail th input:checkbox").prop("checked", checkedCount === totalCount);
}
);
<script src="http://ift.tt/1qRgvOJ"></script>
<div class="k-widget k-grid" id="assetImportDetail" data-role="tooltip">
<table role="grid">
<colgroup><col style="width: 30px;"><col><col><col><col><col><col><col></colgroup>
<thead class="k-grid-header" role="rowgroup">
<tr role="row">
<th class="k-header" scope="col" data-title="Batch Detail ID" data-index="0" data-field="BatchDetailID">
<input id="selectAll" type="checkbox">
</th>
<th class="k-header" aria-sort="ascending" scope="col" data-title="State" data-index="1" data-field="BatchKey" data-dir="asc" data-role="columnsorter"><a class="k-link" href="#">State<span class="k-icon k-i-arrow-n"></span></a></th>
<th class="k-header" scope="col" data-title="Cost" data-index="2" data-field="OriginalCost" data-role="columnsorter"><a class="k-link" href="#">Cost</a></th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-uid="dd43907a-1d2d-4f7d-9426-5278ffe8a0db">
<td role="gridcell"><input name="selectedIds" type="checkbox" value="31"></td>
<td role="gridcell">TX</td>
<td role="gridcell">$19,200.00</td>
</tr>
<tr class="k-alt" role="row" data-uid="a7e6d3a4-3bff-4f26-8e37-d53485ab50f3">
<td role="gridcell"><input name="selectedIds" type="checkbox" value="32"></td>
<td role="gridcell">TX</td>
<td role="gridcell">$19,200.00</td>
</tr>
</tbody>
</table>
</div>
Aucun commentaire:
Enregistrer un commentaire