Kendo grid: How to check all checkboxes of selected rows?

Question

I am using the Telerik Kendo grid with MVC and C#. I have a grid, populated with some data and have added a checkbox column - used so that the user can select all.

Now, when I check the "selectAll" checkbox, all checkboxes are checked (one for each row), as they should be.

What I want to do: I want to be able to double-click on a row and have the chechbox check change - if it is unchecked, a dbl-click will check it and visa versa.

Also, as the Kendo grid allows the user to select many (mousedown, drag and mouseup - like when selecting icons on the desktop), I'd like to have it so that when the user does this action, all the selected rows have their checkboxes checked and again, if they are already checked, then this action will cause the checkboxes to become unchecked.

Details:

• Grid name: Grid
• JQuery version: 1.8.3
• MVC 4
• Latest KendoUI

Code for checking all checkboxes when the "selectAll" checkbox is checked:

$(document).ready(function () {
var grid = $('#Grid').data('kendoGrid');
    grid.thead.find("th:last")
    .append($('<input class="selectAll" type="checkbox"/>'))
    .delegate(".selectAll", "click", function () {
        var checkbox = $(this);
        grid.table.find("tr")
            .find("td:last input")
            .attr("checked", checkbox.is(":checked"))
            .trigger("change");
    });
});

I am a total beginner with Javascript so any help would be much appreciated.

Answer 1

Your example seems to work : http://jsfiddle.net/scaillerie/axpmF/ .

You just have to set your grid as a kendoGrid by adding at the beginning of your document.ready event :

$('#Grid').kendoGrid();

and to be sure that there is a checkbox in all last cells of your table...

---

EDIT :

For updating the state of the checkboxes in the selected rows, you have to register the event dblclick on each cell of the grid:

grid.tbody.on("dblclick", "tr", selectAllSelectedRows);

function selectAllSelectedRows() {
    grid.tbody.find("tr").each(function() {
        var $this = $(this),
            ckbox,
            state;

        if($this.hasClass("k-state-selected")) {
            ckbox = $this.find("td:last input");
            state = ckbox.prop("checked");
            ckbox.prop("checked", !state);   
        }
    })
}

I have updated my fiddle with the new code : http://jsfiddle.net/scaillerie/axpmF/2/ .