Using angular-kendo treeview, how to expand an element on page load?

Question

I have an angular-kendo treeview declared on my page like so:

<div id="treeview" kendo-tree-view="ktv" k-options="treeDataScope"></div>

I would like to expand the root node when the page loads. Angular Kendo examples are few and far between... The Kendo UI examples say to do something like this:

var treeview = $("#treeview").data("kendoTreeView");
// expand the item with text "foo"
treeview.expand(treeview.findByText("foo"));

// expand all loaded items
treeview.expand(".k-item");

I'm (obviously) not declaring the tree view in that way, so I don't have a reference to "treeview" and nothing that I do seems to be able to get that reference. I can get a reference to the "treeview" div, but can't seem to figure out how to get reference to the kendo "treeview" that has the "findByText" method.

Attempting to see if I could find the method, I tried the follow:

$("#treeview").findByText;
$("#treeview").kendoTreeView().findByText;
angular.element("#treeview").findByText;
angular.element("#treeview").kendoTreeView().findByText;

But all end up as undefined.

Any help would be appreciated!

score 3 · Accepted Answer · answered Apr 16 '14 at 18:53

You can use the data-expanded attribute.

For example:

<ul kendo-tree-view>
    <li data-expanded="true">
        Products

or (using an Angular expression to make it dynamic):

<ul kendo-tree-view>
    <li data-expanded="{{$state.includes('products')}}">
        Products

Or if you are populating the tree view dynamically from a datasource, you can use the expanded data item option, e.g.:

$("#treeview").kendoTreeView({
    dataSource: {
        data: [{
            text: "Products", 
            expanded: true, 
            items: [{ text: "X" }, { text: "Y" }, { text: "Z" }] 
        }]
    }
})

score 0 · Answer 2 · edited May 23 '17 at 12:19

I'm not so sure about angular, but with plain old kendo, you get a reference to the treeView like this:

var treeview = $("#treeview").data("kendoTreeView");
var node = treeView.findByText('node text');            
treeView.expand(node);

You can use some other methods to find the node, but if you know the text, that should be easiest. Now, if you are using angular, this may not be correct, but i wouldn't think that would cause the tree view api to behave differently.

I think the only piece you may be missing is how to get a reference to the treeview, that is what this does:

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

See also: Another answer I gave on expanding a node

Using angular-kendo treeview, how to expand an element on page load?

2 Answers2