Uso de Angular-Kendo TreeView, ¿cómo expandir un elemento en la carga de la página?

Question

Tengo un TreeView angular-Kendo Declarado en mi página así:

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

Me gustaría expandir el nodo raíz cuando la página se carga.Los ejemplos angulares de Kendo son pocos y distantes entre ... Los ejemplos de la UI de Kendo dicen que hacen algo como esto:

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

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

Estoy (obviamente) no declarando la vista del árbol de esa manera, por lo que no tengo una referencia a "TreeView" y nada de lo que hago parece poder obtener esa referencia.Puedo obtener una referencia al DIV "TreeView", pero parece que no puede descubrir cómo obtener referencia al Kendo "TreeView" que tiene el método "FindByText".

Intentando ver si pude encontrar el método, probé el seguimiento:

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

Pero todos terminan como indefinidos.

¡Cualquier ayuda sería apreciada!

Answer 1

Puede usar el atributo expandido de datos .

Por ejemplo:

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

o (usando una expresión angular para hacerla dinámica):

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

O si está poblando la vista del árbol dinámicamente desde un DataSource, puede usar la opción expandido expandido, por ejemplo:

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