Angular-Kendo TreeView를 사용하여 페이지로드의 요소를 확장하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com//questions/22053387

  •  21-12-2019
  •  | 
  •  

문제

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;
.

그러나 모두가 정의되지 않은 것으로 끝납니다.

도움이 될 것입니다!

도움이 되었습니까?

해결책

데이터 확장 속성을 사용할 수 있습니다.

예 :

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

또는 (동적으로 만드는 각도 표현식을 사용하여) :

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

또는 DataSource에서 트리보기를 동적으로 채우는 경우 확장 데이터 항목 옵션, 예 :

를 사용할 수 있습니다.
$("#treeview").kendoTreeView({
    dataSource: {
        data: [{
            text: "Products", 
            expanded: true, 
            items: [{ text: "X" }, { text: "Y" }, { text: "Z" }] 
        }]
    }
})
.

다른 팁

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top