Event After Child Nodes are checked/unchecked

4 posts, 0 answers
  1. Randy
    Randy avatar
    73 posts
    Member since:
    Jan 2009

    Posted 28 Aug 2012 Link to this post

    I have a tree view with check boxes. I am using the checkChildren property to select the children.

    I have a bit of code to say how many items are checked. All check boxes have treecheckbox, but only the leaf nodes have itemnode. 

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 29 Aug 2012 Link to this post

    Hello Randy,

    Since the checked state is stored in the dataSource, you can bind an event handler to its change event:

        var treeview = $("[data-role=treeview]").data("kendoTreeView");
        treeview.dataSource.bind("change", function (e) {
            if (e.field == "checked") {
                console.log("Recorded Selected: " + $("[data-role=treeview] :checked").length);
            }
        });

    Greetings,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Randy
    Randy avatar
    73 posts
    Member since:
    Jan 2009

    Posted 29 Aug 2012 Link to this post

    Alex,

    Thanks a lot for the help. I had to change it some because I only want a count of the leaf nodes. That is checkboxes checked that have no child element. I came up with this and it is functional, but not elegent. I couldn't figure out a better way. Can you please look at it and let me know if there is a quicker way of doing it?
    var treeview = $("[data-role=treeview]").data("kendoTreeView");
    treeview.dataSource.bind("change", function (e) {
        if (e.field == "checked") {
            var iNodeCount = 0;
            var list = $("[data-role=treeview] :checked");
            for (var iCount = 0; iCount < list.length; iCount++) {
                if ($("#" + $("[data-role=treeview] :checked")[iCount].id).hasClass("itemnode")) iNodeCount++;
            }
            $("#selected-count").html("Recorded Selected: " + iNodeCount);
        }
    });

     

    As you can see I am getting the name of each checked item in a list and then iterating it and checking to see if that element has a class that only exists on the leaf node. I couldn't modify you query with the :checked to filter out the none leaf nodes.

    Thanks
    Randy

  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 29 Aug 2012 Link to this post

    Hello Randy,

    I believe the following selector will gather the required nodes: $("[data-role=treeview] .itemnode :checked").length? That code should work, under the assumption that the itemnode class is applied to the div element. If that is not the case, please provide more details about your scenario, preferably in a jsBin example.

    Regards,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top