JQuery TreeGrid

Invoke the getKey method of the jqxTreeGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxWidget'>
  <div id="jqxTree"></div>
</div>

JavaScript

debugger;
var data = [
{
    "id": "child1",
    "parentid": "parent",
    "text": "BandWidth",
    "desc": "This report displays events on the sources along with event code, severity and description.",
    "custom": 'Alternatively description'
},
{
    "id": "child2",
    "parentid": "parent",
    "text": "Bonus BandWidth",
    "desc": "Bonus description about it.",
    "custom": 'Alternatively description - Bonus'
},
{
    "id": "parent",
    "parentid": "-1",
    "text": "Device Based Reports"
},
];
// prepare the data
var source =
{
    datatype: "json",
    datafields: [
    { name: 'id' },
    { name: 'parentid' },
    { name: 'text' },
    //{ name: 'value', map: 'desc' },
    { name: 'desc' },
    { name: 'custom' }
    ],
    id: 'id',
    localdata: data
};

// create data adapter.
var dataAdapter = new $.jqx.dataAdapter(source);
// perform Data Binding.
dataAdapter.dataBind();
// get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents
// the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'DisplayName' field. The last parameter
// specifies the mapping between the 'DisplayName' and 'label' fields.
var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }, { name: 'desc', map: 'value' }]);
console.log(records);
$('#jqxTree').jqxTree({
    source: records,
    width: '300px',
});

$('#jqxTree').on('select', function (event) {
    var args = event.args;
    var item = $('#jqxTree').jqxTree('getItem', args.element);
    var label = item.label;
    //var description = item.description;
    var val = item.value;
    console.log('value ' + val);
    console.log(label);
    //console.log(item.id);
    var allRecords = dataAdapter.getrecords();
    //console.log(allRecords);
    for (var i = 0; i < allRecords.length; i++) {
        if (allRecords[i].id === item.id) {
           ...