I'm looking for a way to add and refer to custom attribute like an ID for an item in the the items array of my datasource using the PanelBar Widget for Kendo UI for JQuery.

I'm building my components in React.

Example:

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

For some reason no matter what I try the only thing I can find in the $(e.item) is the item's text value, but not the id value.

You can use a template to add some html with the ID attribute to each item in the panelbar.

    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

In this example, I have surrounded the text with a span. The class myItemClass just lets me easily select the node and data-itemid is the id from the data. Then in the onSelect you can retrieve the id via $(e.item).find(".myItemClass").data('itemid').