CODEWITHSUNDEEP
teleriktreeviewkendo-ui
Matt
Matt

Reputation: 26971

Getting a list of checked boxes in Kendo UI Web TreeView

How might one get a list of checked checkboxes in a Kendo UI Web TreeView? I can't find this functionality anywhere in the API but I would think this would be a pretty basic operation..

Upvotes: 4

Views: 6101

Answers (3)

KorsaR
KorsaR

Reputation: 572

On Kendo demos they provide the following algorithm:

    // function that gathers IDs of checked nodes
    function checkedNodeIds(nodes, checkedNodes) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].checked) {
                checkedNodes.push(nodes[i].id);
            }

            if (nodes[i].hasChildren) {
                checkedNodeIds(nodes[i].children.view(), checkedNodes);
            }
        }
    }

    // show checked node IDs on datasource change
    function onCheck() {
        var checkedNodes = [],
            treeView = $("#treeview").data("kendoTreeView"),
            message;

        checkedNodeIds(treeView.dataSource.view(), checkedNodes);

        if (checkedNodes.length > 0) {
            message = "IDs of checked nodes: " + checkedNodes.join(",");
        } else {
            message = "No nodes checked.";
        }

        $("#result").html(message);
    }

Upvotes: 2

Merritt
Merritt

Reputation: 2341

From Gathering the checked nodes from a treeview:

var treeview = $("#treeview").data("kendoTreeView");
var checkedNodes = [];

function gatherStates(nodes) {
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].checked) {
            checkedNodes.push(nodes[i].id);
        }

        if (nodes[i].hasChildren) {
           gatherStates(nodes[i].children.view());
        }
    }
}

gatherStates(treeview.dataSource.view());

This doesn't seem to account for unexpanded nodes that are checked by cascading: the checkChildren property.

Upvotes: 0

Petur Subev
Petur Subev

Reputation: 20203

There is actually no API method but you can get them easily with jQuery.

To get the checkbox selected inputs use

$('#treeviewName :checked');

To get the checked container li elements use:

$('#treeviewName :checked').closest('li');

Once you have the li element you can pass it to the dataItem method of the TreeView and get the underlying model and thus its ID or other properties.

Upvotes: 4

Related Questions