I'm struggling with this as well. I'm finding I have to click near the box, and then click the checkbox. Like Shreesh reported. So I looked at the code library work-around that Petur provided. That is great that is designed to give select all functionality. But, it isn't working for me. And it still doesn't address how to just select one row, without selecting all.
Here's how I have the column defined:
columns.Bound(c => c.Selection).ClientTemplate("<
input
type
=
'checkbox'
#= Selection ?
checked
=
'checked'
:'' # />").Title("Select").HeaderTemplate("<
input
type
=
'checkbox'
id
=
'masterCheckBox'
class
=
'k-link myHeaderTemplate '
onclick
=
'checkAll(this)'
/>");
And here is my function. Once I couldn't get it to work by using the function in the example. Then I changed it. For another issue I had, I was shown to go through the data and the grid separately.
Since I have alerts in the function, I can see it set the dirty flag on the rows. But then the dirty flag goes away. Can you explain this?
And what is causing the masterCheckBox in the header template to disappear? I must not understand how the Header Templates work. I don't see why it is getting unchecked.
Finally, for just selecting 1 row, is there a way to not select twice?
function checkAll(ele) {
var state = $(ele).is(':checked');
alert("state = " + state);
var grid = $("#grid").data("kendoGrid");
var items = grid.dataSource.data();
for (var i = 0; i <
items.length
; i++) {
items[i].set("Selection", state);
}
//For some reason - the dirty flag doesn't get set when I combine it with the data above
var
rows
=
grid
.items();
alert("rows length " + rows.length)
for (var
i
=
0
; i < rows.length; i++) {
alert("html - row " + i);
$(rows[i].cells[0]).addClass("k-dirty-cell");
$(rows[i].cells[0]).append("<span
class
=
'k-dirty'
></
span
>");
}
}