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?

This doesn't directly answer your question, but just in case you'd missed it, as of R2 2017 SP1, а checkbox based selection is provided by the kendo grid out-of-the-box. It may make what you're trying to achieve a lot simpler, assuming you can use that version of kendo or later. See [this article](https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/grid-selection-checkbox) for a demo of how to do what you're currently attempting, and a link to the newer simpler method. — Joe Glover, Apr 12 '18 at 10:19
Thank you for the reference article, and yes I see that, but I'm still use a much older version at current project for some reasons — nineveh.Y, Apr 12 '18 at 12:49

score 2 · Accepted Answer · answered Apr 12 '18 at 11:01

2

This works form me:

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

Demo

answered Apr 12 '18 at 11:01

DontVoteMeDown

21,122
10
69
105

Thanks! But here is another problem for my case, if I set selectable to true, then the rows I checked may not corresponding to the rows I select, so I wanna set selectable to false, and when it's false, the grid.clearSelection() is disabled, so how should I implement clearSelection myself? – nineveh.Y Apr 12 '18 at 13:49
@nineveh.Y check [this](http://dojo.telerik.com/EBOduHok/2). It seems to work with `selectable: false`. – DontVoteMeDown Apr 12 '18 at 13:51
I see, but in my project it says "TypeError: e.selectable is undefined" happend in grid.clearSelection(), my kendoUI version is kinda old I guess? – nineveh.Y Apr 12 '18 at 14:00
@nineveh.Y idk, what version it is (`kendo.version`) ? – DontVoteMeDown Apr 12 '18 at 14:01
it's 2016.1.412 – nineveh.Y Apr 12 '18 at 14:03
@nineveh.Y you're right, it is an issue in your version. Check [this demo](http://dojo.telerik.com/EBOduHok/3) in the exact version of yours, the same problem. They fixed this issue. I suggest you to upgrade your version, if possible. – DontVoteMeDown Apr 12 '18 at 14:09
Thank you, but is there anyway to implement this method? It's not my personal project so I cannot upgrade the version actually. – nineveh.Y Apr 12 '18 at 14:16
@nineveh.Y [check this](http://dojo.telerik.com/EBOduHok/4). When you call `set` on a dataItem, the grid lines are refreshed, so the selected classes are removed. – DontVoteMeDown Apr 12 '18 at 14:24
1

I see,Thanks a lot! – nineveh.Y Apr 12 '18 at 14:38
@nineveh.Y nice. If this is the answer, don't forget to mark it. Cheers. – DontVoteMeDown Apr 12 '18 at 14:54
1

And in another way it can directly call `$("#grid").data("kendoGrid").dataSource.read();` – nineveh.Y Apr 12 '18 at 14:57

KendoUI grid cancel checked/selected rows

1 Answers1