JavaScript Grid

Set the initrowdetails property of the jqxGrid. 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="jqxgrid"></div>
</div>

JavaScript

// prepare the data
// Orders Grid
// prepare the data
var dataFields = [
  { name: 'CustomerID' },
  { name: 'CompanyName' },
  { name: 'ContactName' },
  { name: 'ContactTitle' },
  { name: 'Address' },
  { name: 'City' },
  { name: 'Country' }
];
var source =
    {
      datafields: dataFields,
      id: 'CustomerID',
      localdata: [
        { "CustomerID": "1", "CompanyName": "Bakery", },
        { "CustomerID": "2", "CompanyName": "Pizzastore", }
      ]
    };
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();

var level2DataFirst = [
  { "CustomerID": "1", "Manager": "Jake", "Phone": "111111111" },
  { "CustomerID": "2", "Manager": "Phil", "Phone": "222222222" }
];
var level2DataSecond = [
  { "CustomerID": "3", "Manager": "Chase", "Phone": "3333" },
  { "CustomerID": "4", "Manager": "Marlo", "Phone": "4444" },
   { "CustomerID": "5", "Manager": "Gab", "Phone": "5555" }
];

var dataFields2 = [
  { name: 'CustomerID' },
  { name: 'Manager' },
  { name: 'Phone' }
];
var level2Source = {
  datafields: dataFields2
};

var initlevel2 = function (index)
{
  var grid = $($.find('#grid' + index));
  if (grid != null)
  {

    if (index == 0)
    {
      level2Source.localdata = level2DataFirst;
    } else if (index == 1)
    {
      level2Source.localdata = level2DataSecond;
    }

    var dataAdapter2 = new $.jqx.dataAdapter(level2Source);
    dataAdapter2.dataBind();
    grid.jqxGrid({
      width: 600, height: 200,
      rowdetails: true,
      initrowdetails: initlevel3,
      selectionmode: 'checkbox',
      source: dataAdapter2,
      rowdetailstemplate: { rowdetails: "<div id='subgrid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
      columns: [
        { text: 'Manager', datafield: 'Manager', width: 250 },
        { text: 'Phone', datafield: 'Phone', width: 150 }
      ]
    });
    grid.on('rowclick', function (event)
            {
      //alert('Level 1');
    });       
    
  }
}

var...