jQuery - Kendo UI checkbox control

0
votes

I've got this Kendo UI checkbox on a data grid header and when this is ticked, all checkboxes on grid rows will need to be ticked as well and vice versa.

The tricky part is to make it listen to each grid row state so that when any row changes its checkbox state, the grid header should be notified by this change and change its state automatically because all rows are no longer checked/unchecked.

I've gone this far and finding it hard to take it further. JS BIN

Would appreciate your input.

1
jquerycheckboxkendo-ui

1 Answers

1
votes

What about following approach, would that work for you ? 

var $grid = $('#grid');
var grid = $grid.kendoGrid().data('kendoGrid');
var rowCount = 2;

$('.parentCheckbox').click(function () {
     $('.childCheckbox').prop('checked',this.checked);
});

$('.childCheckbox').click(function () {
    var checkeBoxesCount = $grid.find('input:checked').size();
    $('.parentCheckbox').prop('checked',checkeBoxesCount == rowCount);
});

http://jsfiddle.net/XsAZa/6/