Как программно выбрать корневой узел дерева Kendo UI

Я новичок в Kendo UI. Мое приложение Asp.net MVC имеет древовидное представление пользовательского интерфейса Kendo, которое настроено следующим образом. Каждый узел дерева имеет уникальный идентификатор (например, EmployeeId, который является целым числом). Как я могу программно выбрать корневой узел (с идентификатором 1) древовидного представления Kendo UI, и цвет фона корневого узла должен быть выделен? Спасибо за помощь.

           var _root = new kendo.data.HierarchicalDataSource({
                transport: {
                    read: {
                        cache: false,
                        url: "/Employee/GetEmployees",
                        dataType: "json",
                        data: { employeeId: _selectedId}
                    }
                },
                schema: {
                    model: {
                        id: "Id",
                        hasChildren: "HasChildren",
                        expanded: "expanded",
                        parentId: "parentId",
                        ItemType: "ItemType"
                    }
                }
            });

            _tree = $("#treeView").kendoTreeView({
                dataSource: _root,
                dataTextField: "Name",
                loadOnDemand: true,                
                dataImageUrlField: "Image",
                dataBound: function (e) {
                    handleTreeDataBound(e);
                },
                select: function (e) {
                    handleSelect(e.node);
                }
            });

            treeViewCtrl = $("#treeView").data("kendoTreeView");

kendo-ui kendo-treeview
person Thomas.Benz    schedule 18.02.2014    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Используя метод select в дереве, вы выбираете первый узел:

treeViewCtrl.select($("#treeView").find(".k-item").first());

Если у вас более одного корневого узла, вам придется использовать dataItem, чтобы получить элемент данных и сравнить его идентификатор с тем, который вы хотите выбрать.

person Lars Höppner    schedule 18.02.2014
comment
Большое спасибо, ваши коды работают очень хорошо. - person Thomas.Benz; 19.02.2014

arrow_upward
3
arrow_downward

Вы также можете использовать этот небольшой фрагмент кода:

treeview.select($('.k-item:first'));

Это выбирает корневой узел. Вы также можете расширить его, используя:

treeview.expand($('.k-item:first'));
person Sven Möhring    schedule 26.11.2015

arrow_upward
2
arrow_downward

Другой способ получить все корневые узлы, если у вас их несколько, — использовать селектор CSS для получения непосредственных дочерних узлов li узла treeview ul. Оттуда вы можете получить dataItem для каждого корня.

$("#treeview").find("ul > li").each(function () {
     var dataItem = treeView.dataItem($(this));
     console.log(dataItem.text);
});
person cheino    schedule 21.01.2015