À l'aide d'Angular-Kendo Treeview, comment développer un élément sur la charge de la page?

Question

J'ai un arborescence angulaire-Kendo TreeView déclarée sur ma page comme:

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

Je voudrais développer le nœud racine lorsque la page se charge.Les exemples de Kendo angulaires sont rares entre ... Les exemples de Kendo UI disent à faire quelque chose comme ceci:

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

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

Je ne dis pas (évidemment) ne pas déclarer l'arborescence de cette façon, je n'ai donc pas de référence à "TreeView" et rien que je n'aime que je semble pouvoir obtenir cette référence.Je peux faire référence à la "TreeView" DIV, mais je ne peux pas sembler comprendre comment faire référence au Kendo "TreeView" qui a la méthode "FindByText".

Tentative de voir si je pouvais trouver la méthode, j'ai essayé le suivi:

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

mais tous finissent comme indéfinis.

Toute aide serait appréciée!

Answer 1

Vous pouvez utiliser l'attribut développé DATA.

Par exemple:

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

ou (en utilisant une expression angulaire pour la rendre dynamique):

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

ou si vous remplissez l'affichage de l'arborescence dynamiquement à partir d'une source de données, vous pouvez utiliser l'option Data Option de données , par exemple:

$("#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