Пользовательские атрибуты Kendo UI TreeView

У меня есть дерево кендо, которое я связываю, используя локальные данные.

Все отлично работает с кодом, который у меня есть.

Однако я пытаюсь добавить настраиваемые атрибуты к сгенерированным элементам, например data-name.

Как я могу сделать это, используя kendo.data.HierarchicalDataSource?

// bind kendo tree
var treeDataSource = new kendo.data.HierarchicalDataSource({
    data: [{ Id: "id", Text: "Node 1", HasChildren: false, ChildrenFolders: [], HtmlAttributes: { "data-name": "Custom Name" } }],
    schema: {
        model: {
            children: "ChildrenFolders",
            hasChildren: "HasChildren",
            id: "Id",
            htmlAttributes: "HtmlAttributes"
        }
    }
});

this.kendoTreeView = $("#tree").kendoTreeView({
    dataSource: treeDataSource,
    dataTextField: "Text",
    loadOnDemand: false
}).data("kendoTreeView");

javascript kendo-ui kendo-treeview
person Catalin    schedule 06.01.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вам придется заменить шаблон элемента в виджете дерева, что, к сожалению, будет означать замену всего метода _template. Я бы предложил создать структуру DOM вручную (как это сделано здесь), таким образом вы можете установить атрибуты перед инициализацией древовидной структуры. Другим вариантом может быть использование опции template древовидной структуры (в этом случае вы можете добавлять атрибуты только к дочерним элементам).

person Lars Höppner    schedule 07.01.2014
comment
+1 за ручное создание DOM, спасибо, что указали на это - person scniro; 14.05.2014

arrow_upward
0
arrow_downward

Вы можете получить свойства элемента dataSource, используя dataItem(), метод принимает селектор jQuery в качестве параметра:

var treeview = $("#treeview").kendoTreeView({
                        animation: false,
                        dataSource: dataSource,
                        select: function (e) {
                            var dataitem = treeview.dataItem("#treeview_tv_active");
                            //dataitem.HtmlAttributes
                        }
                    }).data("kendoTreeView");
person enumm    schedule 10.12.2014
comment
Кодовые ответы не приветствуются. Пожалуйста, добавьте несколько строк, чтобы объяснить, почему это решение работает. - person parakmiakos; 10.12.2014