Usando Angular-Kendo TreeView, come espandere un elemento sul carico della pagina?

Question

Ho un TreeView Angular-Kendo Dichiarato sulla mia pagina come SO:

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

.

Vorrei espandere il nodo root quando la pagina viene caricata.Gli esempi angolari di Kendo sono pochi e lontani tra ... Gli esempi di Kendo Ui dicono di fare qualcosa del genere:

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

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

.

Io sono (ovviamente) Non dichiarando la vista dell'albero in questo modo, quindi non ho un riferimento a "TreeView" e nulla che io sembra essere in grado di ottenere quel riferimento.Posso ottenere un riferimento al div "TreeView", ma non riesco a capire come ottenere il riferimento al Kendo "TreeView" che ha il metodo "FindbyText".

Tentativo di vedere se potevo trovare il metodo, ho provato il seguente:

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

.

Ma tutto finisce come indefinito.

Qualsiasi aiuto sarebbe apprezzato!

Answer 1

È possibile utilizzare l'attributo Expanse DATA-/ STOR>.

Ad esempio:

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

.

o (usando un'espressione angolare per renderlo dinamico):

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

.

O se si sta compilando la vista ad albero in modo dinamico da un DataSource, è possibile utilizzare l'opzione Expansed > 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