使用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，但似乎无法弄清楚如何参考具有“findbytext”方法的kendo“treeview”。

试图查看我是否可以找到该方法，我尝试了以下：

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

.

或者如果您从数据源动态填充树视图，则可以使用扩展数据项选项，例如：

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