This is a migrated thread and some comments may be shown as answers.

Cancel checkbox parent click

4 Answers 86 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 1
Phil asked on 06 Jan 2014, 08:15 PM
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

4 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 08 Jan 2014, 03:25 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Phil
Top achievements
Rank 1
answered on 08 Jan 2014, 09:23 PM
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

 
0
Phil
Top achievements
Rank 1
answered on 08 Jan 2014, 09:28 PM
I've also attached my test MVC project in case that's useful to you.

Phil
0
Alexander Popov
Telerik team
answered on 09 Jan 2014, 02:34 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TreeView
Asked by
Phil
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Phil
Top achievements
Rank 1
Share this question
or