Usando o treeview angular-kendo, como expandir um elemento no carregamento da página?

Question

Eu tenho uma treeview angular-kendo declarada em minha página assim:

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

Gostaria de expandir o nó raiz quando a página for carregada.Exemplos de Kendo Angular são poucos e distantes entre si ...Os exemplos da UI do Kendo dizem para fazer algo assim:

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

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

(Obviamente) não estou declarando a visualização em árvore dessa maneira, então não tenho uma referência a "treeview" e nada do que faço parece conseguir obter essa referência.Consigo obter uma referência ao div "treeview", mas não consigo descobrir como obter referência ao "treeview" do kendo que possui o método "findByText".

Tentando ver se conseguia encontrar o método, tentei o seguinte:

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

Mas tudo acaba indefinido.

Qualquer ajuda seria apreciada!

Answer 1

Você pode usar o dados expandidos atributo.

Por exemplo:

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

ou (usando uma expressão Angular para torná-la dinâmica):

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

Ou se você estiver preenchendo a visualização em árvore dinamicamente a partir de uma fonte de dados, poderá usar o método expandido opção de item de dados, por exemplo:

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

Answer 2

Não tenho tanta certeza sobre angular, mas com o velho kendo, você obtém uma referência ao treeView assim:

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

Você pode usar outros métodos para encontrar o nó, mas se você conhece o texto, isso deve ser mais fácil.Agora, se você estiver usando angular, isso pode não estar correto, mas eu não acho que isso faria com que a API de visualização em árvore se comportasse de maneira diferente.

Acho que a única peça que pode estar faltando é como obter uma referência para o treeview, é isso que faz:

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

Veja também: Outra resposta que dei sobre a expansão de um nó