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