Cancel checkbox parent click

5 posts, 0 answers
  1. Phil
    Phil avatar
    15 posts
    Member since:
    Oct 2012

    Posted 06 Jan 2014 Link to this post

    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
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 08 Jan 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Phil
    Phil avatar
    15 posts
    Member since:
    Oct 2012

    Posted 08 Jan 2014 Link to this post

    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

     
  5. Phil
    Phil avatar
    15 posts
    Member since:
    Oct 2012

    Posted 08 Jan 2014 Link to this post

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

    Phil
  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 09 Jan 2014 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready