Open Kendo UI TreeView node using id

M.I.T. picture M.I.T. · Jun 7, 2013 · Viewed 7.5k times · Source

I am using the Kendo UI TreeView to generate my tree. Here is the tree documentation.

It works fine, but now I want to expand(open) a node using id.

I found some code here, but it isn't working with my code:

var serviceRoot = "search/treej.php";
homogeneous = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: serviceRoot,
            dataType: "jsonp"
        }
    },
    schema: {
        model: {
            id: "entity_id",
            hasChildren: "child"
        }
    }
});

$("#treeview").kendoTreeView({
    checkboxes: {
        checkChildren: false
    },
    dataSource: homogeneous,
    dataTextField: "value"
});


var $tree = $("#treeview").kendoTreeView(
    {
        select: function (event)
        {
            var $item = $(event.node);
            console.log( $item );
            alert( "selected" );
        }
    });

var $selected = $('#4'); // here i am passing static values
var $treePath = $selected.parentsUntil($tree, "li");

var treeView = $tree.data('kendoTreeView');

// Expand the tree in order to show the selected item
treeView.expand( $treePath );

// Gotta make both calls...
treeView.select( $selected );
treeView.trigger( 'select', {node: $selected} );

I also found this code on the Kendo website which may help:

var dataSource = treeview.dataSource;
var dataItem = dataSource.get(5); // find item with id = 5
var node = treeview.findByUid(dataItem.uid);

Answer

Jose Tuttu picture Jose Tuttu · Jul 11, 2013

can you try replacing

var $selected = $('#4');

with your second part

var dataSource = treeview.dataSource;
var dataItem = dataSource.get(4); // find item with id = 4
var $selected = treeview.findByUid(dataItem.uid);