Cannot get value of HtmlAttributes item in kendo MVC treeview

Question

I am using the Kendo MVC wrapper extensions to create a TreeView from my models. I would like to pass some data from the model with HtmlAttributes to the view. Here is my Action :

public ActionResult Index()
    {
        var nodeList = new List<TreeViewItemModel>();
        nodeList.Add(new TreeViewItemModel
        {
            Id = "1",
            Text = "Item 1",
            HasChildren = true,
            HtmlAttributes = new Dictionary<string, string>
            {
                {"class","XXXX"}
            },
            Items = new List<TreeViewItemModel>
                {
                    new TreeViewItemModel{Id="1.1", Text = "sub Item 1.1",HasChildren = false},
                    new TreeViewItemModel{Id="1.2", Text = "sub Item 1.2",HasChildren = false}
        });
        nodeList.Add(new TreeViewItemModel { Id = "2", Text = "Item 2", HasChildren = false });

        return View(nodeList);
    }

Here is my view :

@using Kendo.Mvc.UI
@model IEnumerable<Kendo.Mvc.UI.TreeViewItemModel>
@(Html.Kendo().TreeView()
.Name("treeView")
   .BindTo(Model)
   .DragAndDrop(true)
            )

Here is the element from Chrome

<li class="k-item k-first" data-id="1" data-uid="6263f4c5-85f3-446c-a843-7d3786fb0f68" role="treeitem" id="treeView_tv_active">

As you can see there isn't any class:XXX in my li Tag So how can I give The XXX class to li Tag?

Same thing happens in my case. Can't find an answer :/ – AstroSharp Nov 24 '14 at 19:44 — AstroSharp, Nov 24 '14 at 19:44

score 2 · Answer 1 · answered May 25 '15 at 20:13

I can't figure out how to do this automatically, so here's a workaround.

C# passes back a List<Kendo.Mvc.UI.TreeViewItemModel>() to the treeview->datasource->transport->read event:

var items = new List<Kendo.Mvc.UI.TreeViewItemModel>();

////////////////////////////////////////////////////////////////////////////////

// areas of expertise
var aoe = new Kendo.Mvc.UI.TreeViewItemModel()
{
    Text = "Areas of Expertise",
    Id = "resume-treeview-category-AreasOfExpertise",
    HasChildren = false,
    HtmlAttributes = new Dictionary<string, string>(){{ "class", "resume-treeview-category"}, {"cat-id", "AreasOfExpertise" }},

};
items.Add(aoe);

return Json(items, JsonRequestBehavior.AllowGet);

I then hook the dataBound event to add the above attributes into the treeview item.

jQuery(document).ready(function ($) {
    $("#document-treeview").kendoTreeView({
        dataTextField: "Text",
        dataSource: {
            transport: {
                read: {
                    type: 'POST',
                    url: "@Url.Action("GetAllTreeData", "Document2")",
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json'
                },
                parameterMap: function (data, type) {
                    if (type == "read") {
                        return JSON.stringify({
                            id: ResumeId
                        });
                    }
                }
            },
            schema: {
                model: {
                    id: "Id",
                    hasChildren: "HasChildren",
                    children: "Items"
                }
            }
        },
        dataBound: function(e) {
            // Apparently reading an item after treeview creation doesn't apply the html attributes. Do that here.

            var len = this.dataSource.data().length;

            for (var i = 0; i < len; i++)
            {
                var dataItem = this.dataSource.data()[i];

                var uid = dataItem.uid;
                var li = $('#document-treeview li[data-uid="' + uid + '"]');

                li.addClass(dataItem['HtmlAttributes']['class']);
                li.attr('cat-id', dataItem['HtmlAttributes']['cat-id']);
            }
        }
    });
}

Note the HtmlAttributes added from C# are explicitly handled in JavaScript =/

Cannot get value of HtmlAttributes item in kendo MVC treeview

1 Answers1