是否可以为 Kendo 的面板栏小部件中的面板项添加自定义属性？

Question

我正在寻找一种方法来添加和引用自定义属性，例如使用 JQuery 的 Kendo UI 的 PanelBar 小部件在我的数据源的项目数组中的项目的 ID。

我正在 React 中构建我的组件。

例子：

componentDidMount(){
    let itemsList = this.props.navProps.map((prop,index) => {
        var open = false
        if (index == 0) open = true
        return { text: prop.name, 
                 expanded: open,  
                 items: [{text: "Sub Item 1", id: "hey"},
                         {text: "Sub Item 2", id: "ho"}]
                }
})

const menuOptions = {
        expandMode: "single",
        dataSource: itemsList
}

let onSelect = function(e) {
   console.log("Select: " + $(e.item).find("> .k-link").text());
}

let menu = new ppbar.ui.PanelBar(menudiv,menuOptions);

$(menu.element).kendoPanelBar({
    select: onSelect,
});

render(){
  return ( 
    <div id='menudiv' />
  )
}

出于某种原因，无论我尝试什么，我在$(e.item) 中唯一能找到的是项目的文本值，而不是 id 值。

Answer 1

您可以使用template 为面板栏中的每个项目添加一些带有 ID 属性的 html。

    var inlineDefault = new kendo.data.HierarchicalDataSource({
        data: [
            {
                id: 1, text: "Furniture", items: [
                  { id: 2, text: "Tables & Chairs" },
                  { id: 3, text: "Sofas" },
                  { id: 4, text: "Occasional Furniture" }
                ]
            },
            {
                id: 5, text: "Decor", items: [
                  { id: 6, text: "Bed Linen" },
                  { id: 7, text: "Curtains & Blinds" },
                  { id: 8, text: "Carpets" }
                ]
            }
        ]
    });


    $("#panelbar-left").kendoPanelBar({
        dataSource: inlineDefault,
        template: "<span class='myItemClass' data-itemid='#= item.id #'>#= item.text #</span>",
        select: function(e){
           alert("Item id = " + $(e.item).find(".myItemClass").data('itemid'));
        }
    });

DEMO

在这个例子中，我用跨度包围了文本。 myItemClass 类让我可以轻松地选择节点，而 data-itemid 是数据中的 id。然后在 onSelect 中，您可以通过$(e.item).find(".myItemClass").data('itemid') 检索 id。