Использование Angular-Kendo TreeView, как расширить элемент на странице нагрузки?

Question

У меня есть angular-kendo treeview, объявленный на моей странице, как так:

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

.

Я хотел бы расширить корневой узел, когда нагрузки страницы.Примеры угловых кендо мало и далеко между ... Примеры Kendo UI говорят, что что-то подобное:

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

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

.

Я (очевидно), не объявляю обзор дерева таким образом, поэтому у меня нет ссылки на «TreeView» и ничего, что я, кажется, сможет получить эту ссылку.Я могу получить ссылку на «TreeView» DIV, но не могу понять, как получить ссылку на kendo "Treeview", который имеет метод «Findbytext».

Попытка посмотреть, смогу ли я найти метод, я попробовал следующие:

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

.

Но все в конечном итоге не определено.

Любая помощь будет оценена!

Answer 1

Вы можете использовать атрибут расширенного данных .

Например:

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

.

или (используя угловое выражение, чтобы сделать его динамическими):

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

.

Или, иначе вы заполняете вид дерева динамически из данных DataSource, вы можете использовать опцию элемента e.g.:

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

.

Answer 2

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