无法在ken​​do MVC treeview中获取HtmlAttributes项的值

Question

我正在使用Kendo MVC包装器扩展来从我的模型中创建TreeView。我想将带有HtmlAttributes的模型中的一些数据传递给视图。 这是我的行动：

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

以下是我的观点：

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

以下是Chrome中的元素

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

正如您所看到的，没有任何课程：我的li中的XXX标签那么如何才能将XXX课程提供给li Tag？

Answer 1

我无法弄清楚如何自动执行此操作，因此这是一种解决方法。

C＃将List<Kendo.Mvc.UI.TreeViewItemModel>()传回treeview-＆gt; datasource-＆gt; transport-＆gt;读取事件：

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

然后我挂钩dataBound事件以将上述属性添加到treeview项中。

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']);
            }
        }
    });
}

请注意，从C＃中添加的HtmlAttributes在JavaScript = /

中显式处理