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

Event After Child Nodes are checked/unchecked

3 Answers 341 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Randy
Top achievements
Rank 1
Randy asked on 28 Aug 2012, 11:21 PM
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

3 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 29 Aug 2012, 12:11 PM
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!
0
Randy
Top achievements
Rank 1
answered on 29 Aug 2012, 02:04 PM
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

0
Alex Gyoshev
Telerik team
answered on 29 Aug 2012, 02:20 PM
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!
Tags
TreeView
Asked by
Randy
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Randy
Top achievements
Rank 1
Share this question
or