KendoUI grid cancel checked/selected rows

Question

I have a KendoUI grid with checkbox to select multiple rows, it's dataBound event is :

function onDataBound(e) {
e.sender.items().each(function () {
    var dataItem = e.sender.dataItem(this);
    kendo.bind(this, dataItem);
    if (dataItem.IsChecked) {
        $(this).addClass("k-state-selected");
    }
});

}

And the bind field is:

{ 
    field:"IsChecked",  
    template: "<input type='checkbox' class='checkbox' data-bind='checked:IsChecked' />"
}

It works fine, but now when I click the toolbar cancel button, the rows I manually checked(and selected) just now are still displaying, but I want to back to the orginal state(before I check/select rows manually)

How can I do this cancel action in a custom toolbar button?

Answer 1

This works form me:

$(grid.element).on("click", ".toolbar-cancel", function() {
    grid.clearSelection();
    grid.dataItems().forEach(function(dataItem) {
        dataItem.set("IsChecked", false);
    });
});

Demo