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 initlevel2 = function (index) {
                var grid = $($.find('#grid' + index));
                
                if (grid != null) {
                 var dataFields2 = [
                    { name: 'CustomerID' },
                    { name: 'Manager' },
                    { name: 'Phone' }
                    ];
            var source =
            {
                datafields: dataFields2,
                localdata: [{"CustomerID": "1", "Manager": "Jake", "Phone": "111111111"},
                {"CustomerID": "2", "Manager": "Phil", "Phone": "222222222"}
                ]
            };
            var dataAdapter2 = new $.jqx.dataAdapter(source);
            dataAdapter2.dataBind();
                    grid.jqxGrid({ rowdetails: true, initrowdetails: initlevel3, source: dataAdapter2, width: 600, height: 200,
                        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:...