باستخدام الزاوي-كندو treeview, كيفية توسيع عنصر في الصفحة الحمل ؟

Question

علي الزاوي-كندو treeview أعلن على الصفحة الخاصة بي مثل ذلك:

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

أود أن توسيع عقدة الجذر عند تحميل الصفحة.الزاوي كندو أمثلة قليلة ومتباعدة...كندو واجهة المستخدم الأمثلة نقول أن تفعل شيئا مثل هذا:

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" شعبة, ولكن لا يمكن أن يبدو لمعرفة كيفية الحصول على الإشارة إلى كندو "treeview" أن لديه "findByText" الأسلوب.

في محاولة لمعرفة إذا كان يمكن أن تجد طريقة, حاولت اتبع:

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