Event After Child Nodes are checked/unchecked

[Randy]

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. 

$(".treecheckbox").change(function () {

$("#selected-count").html("Recorded Selected: " + $("#treeview input.itemnode").serializeArray().length);

}); 

The figures come out fine when you click on the leaf nodes. However if you select any of the parent nodes, the count get off. Both the click and the change event for the check boxes fire before the event to update the child nodes. So If I have no records selected  and click a parent that auto selects 5 then the query returns zero until something else fires the event and then the count it right.

Is there any post update event for the check boxes that I can wire to in order to run after that update process fires?

Alternatively, perhaps I am doing it the hard way. Is there a better way of handling it?

Thanks
Randy

[Alex Gyoshev]

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

[Randy]

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

[Alex Gyoshev]

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