Kendo UI TreeView custom attributes

Question

I have a Kendo tree that I am binding using local data

Everything works fine with the code I have.

However, I am trying to add custom attributes to the items generated, like data-name.

How can I do this using 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");

score 3 · Answer 1 · answered Jan 07 '14 at 00:00

3

You'd have to replace the item template in the treeview widget, which unfortunately would mean replacing the whole _template method. I'd suggest creating the DOM structure manually (as done here), that way you can set the attributes before initializing the treeview. Another option would be to use the treeview's template option (in that case, you can only add the attributes on the child elements though).

answered Jan 07 '14 at 00:00

Lars Höppner

18,252
2
45
73

+1 for manually creating the DOM thank you for pointing that out – scniro May 14 '14 at 18:40

enumm · Answer 2 · 2014-12-11T08:24:10.850

0

You can get dataSource item properties using dataItem(), method takes jQuery selector as parameter:

var treeview = $("#treeview").kendoTreeView({
                        animation: false,
                        dataSource: dataSource,
                        select: function (e) {
                            var dataitem = treeview.dataItem("#treeview_tv_active");
                            //dataitem.HtmlAttributes
                        }
                    }).data("kendoTreeView");

edited Dec 11 '14 at 08:24

answered Dec 10 '14 at 15:14

enumm

13
3

2

Code only answers are discouraged. Please add some lines to explain why this solution works. – parakmiakos Dec 10 '14 at 15:35

Kendo UI TreeView custom attributes

2 Answers2