Kendo TreeView does not generate data attributes for custom template

676 Views Asked by At

I am using Kendo.Mvc.UI.TreeViewItemModel to build kendo treeview. Othe than Id and Text property this class also has HtmlAttributes property of type IDictionary<string, string>

I can add any additional data into HtmlAttributes property while building model, and kendo would render these Html Attributes as html data attribute on tree node.

    public IEnumerable<TreeViewItemModel> BuildTreeView(IEnumerable<MyGroup> groups)
    {
        var nodes = new List<TreeViewItemModel>();

        foreach (var grp in groups)
        {
            var root = new TreeViewItemModel()
            {
                Id = "0",
                Text = grp.Key,
                HasChildren = grp.Any()
            };

            foreach (var item in grp)
            {
                var dictionary = new Dictionary<string, string>();
                dictionary.Add("data-template-id",item.TemplateID.ToString());                    
                dictionary.Add("data-filename", item.FileName);
                root.Items.Add(new TreeViewItemModel()
                {
                    Text = item.DisplayText,
                    HasChildren = false,
                    HtmlAttributes = dictionary
                });
            }
            nodes.Add(root);
        }
        return nodes;
    }

cshtml

            @(Html.Kendo().TreeView()
                .Name("MyTreeView")
                .DataTextField("Text")
                .BindTo(Model.Items))

and then in JS i can access this data

   var _treeView = $("#MyTreeView").getKendoTreeView();
   var htmlItem = _treeView.select();
   var templateid = htmlItem.data("template-id");
   var filename = htmlItem.data("filename");

This is working fine as long as im using kendo's default template. However if i use custom template then Kendo does not generate data attributes

           @(Html.Kendo().TreeView()
                .Name("MyTreeView")
                .TemplateId("treeViewItemTemplate")
                .BindTo(Model.Items))


<script type="text/x-kendo-tmpl" id="treeViewItemTemplate">
    <span>#=item.text#</span>
    # if (!item.items){#
        <span class="glyphicon glyphicon-plus-sign" aria-hidden=true></span>
    #}#
</script>

now when the page renders and using F12 if look at the tree node ( which is li tag) i don't see any data attributes

0

There are 0 best solutions below