Est-il possible d'ajouter des attributs personnalisés aux éléments du panneau dans un widget de panneau de contrôle pour Kendo?

Question

Je cherche un moyen d'ajouter et de faire référence à l'attribut personnalisé comme un ID pour un élément dans le tableau des éléments de ma source de données en utilisant le widget PanelBar pour Kendo UI pour JQuery.

Je construis mes composants dans React.

Exemple:

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' /> 
) 
} 

Pour une raison quelconque, peu importe ce que j'essaie la seule chose que je peux trouver dans le $(e.item) est la valeur de texte de l'élément, mais pas la valeur id.

Answer 1

Vous pouvez utiliser un template pour ajouter du code HTML avec l'attribut ID à chaque élément de la barre de menus.

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

Dans cet exemple, j'ai entouré le texte d'une portée. La classe myItemClass me permet simplement de sélectionner le noeud et data-itemid est l'identifiant des données. Ensuite, dans le onSelect, vous pouvez récupérer l'identifiant via $(e.item).find(".myItemClass").data('itemid').