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");

Answer 1

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