Cancel checkbox parent click

[Phil]

Hello,
I have a need to cancel a checkbox check if the user has reached a limit. Unfortunately, simply calling preventDefault isn't working when the checked item is a parent. So I whipped up a little jQuery to handle this for me --

$("#treeview").on("click", ":checkbox", function (e) {
    var treeView = $("#treeview").data("kendoTreeView");
    origChecked = listChecked;
    listChecked = [];
    checkedNodeIds(treeView.dataSource.view(), listChecked);

    if (searchLimited && listChecked.length > searchLimit) {
        var newChecked = $(listChecked).not(origChecked).get();
        $.each(newChecked, function (index, value) {
            var item = treeView.dataSource.get(value);
            item.set("checked", false);
        });

        e.preventDefault();
        listChecked = origChecked;
    }
});

// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].checked) {
            if (nodes[i].id != "0") {
                checkedNodes.push(nodes[i].id);
            }
        }

        if (nodes[i].hasChildren) {
            checkedNodeIds(nodes[i].children.view(), checkedNodes);
        }
    }
}

I can see this works fine. If I put a breakpoint at the end, the treeview looks perfect. However, it appears that some other internal kendo event is firing after and resetting the items to a checked state. As I understood things, calling the set method should have been updating the underlying data for the treeview, so I didn't expect my changes to be overwritten... What am I missing? 

Thanks,
Phil

[Alexander Popov]

Hi Phil,

Thank you for the provided code snippet. I tried to reproduce the issue here, but to no avail - everything seems to be working as expected. Could you please check the example and let me know if I am doing something differently?

Regards,
Alexander Popov
Telerik

[Phil]

Alexander,
Thanks for the example. That one appears to work fine. Unfortunately, check children was disabled. Once I enable that, the issue arises.

Just enabling that in your code didn't manifest the same exact issues I have. So I've posted a jsBin example showing my exact issue at http://jsbin.com/aDusuGO/1/edit. This was extracted from the HTML generated by Kendo MVC helpers, so please excuse the jumbled code.

Click on items 100, 200, and then 2 (the parent).

You'll note it leaves 201 checked while 2 is returned to the indeterminate state. 

I've stepped through the js as best I know how (my world is really more .NET). If you put a breakpoint on e.preventDefault(), everything looks right. From there, you can walk through the execution to what appears to be a built in event handler on treeview checkboxes inside kendo.dataviz.core.js. I'm attaching a screenshot of the handler code I'm speaking of.

Thanks in advance for any insight you can provide!

Phil

 

[Phil]

I've also attached my test MVC project in case that's useful to you.

Phil

[Alexander Popov]

Hello again Phil,

Thank you for the provided project. In the current scenario I would recommend you to set the item's check property to false after all other operations are complete. You can achieve this using a setTimeout function with no timeout parameter, for example:  

$.each(newChecked, function (index, value) {
    var item = treeView.dataSource.get(value);
    setTimeout(function () { item.set("checked", false); });
});

Regards,
Alexander Popov
Telerik