的 DEMO

Question

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

我正在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

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

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

1 个答案:

的 DEMO