Html Grid

Dynamically set the columns 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">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<table style="width: 45%; float: left;">
        <tr>
            <td style="border: 1px solid #000; width: 300px;"><div id="jqxgrid"></div></td>
        </tr>
    </table>
    <table style="width: 45%; float: left;">
        <tr>
            <td style="border: 1px solid #000; width: 300px;"><div id="game-grid"></div></td>
        </tr>
    </table>
    <table style="width: 45%; float: left;">
        <tr>
            <td style="border: 1px solid #000; width: 300px;"><div id="game-grid2"></div></td>
        </tr>
    </table>

JavaScript

var data = [
		{
		    "ruleid": "1001",
		    "size": "51",
		    "ZScore": "1.21839",
		    "complexity": "8",
		    "constraints": {
		        "constraint": [
		        {
		            "varName": "BirthWeight",
		            "Min": "2.500000",
		            "Max": "2.500000"
		        },
		        {
		            "varName": "AgeMother",
		            "Min": "39.000000",
		            "Max": "39.000000"
		        },
		        {
		            "varName": "AgeFather",
		            "Min": "35.000000",
		            "Max": "39.000000"
		        }
		        ]
		    }
		},
		{
		    "ruleid": "1002",
		    "size": "92",
		    "ZScore": "2.60137",
		    "complexity": "2",
		    "constraints": {
		        "constraint": [
		        {
		            "varName": "AgeFather",
		            "Min": "32.000000",
		            "Max": "45.000000"
		        },
		        {
		            "varName": "Age AD Start (weeks)",
		            "Min": "14.000000",
		            "Max": "30.000000"
		        }
		        ]
		    }
		},
		{
		    "ruleid": "1003",
		    "size": "62",
		    "ZScore": "2.60137",
		    "complexity": "2",
		    "constraints": {
		        "constraint": [
		        {
		            "varName": "AgeFather",
		            "Min": "32.000000",
		            "Max": "45.000000"
		        },
		        {
		            "varName": "Age AD Start (weeks)",
		            "Min": "14.000000",
		            "Max": "30.000000"
		        }
		        ]
		    }
		}
];
var source =
{
    datafields: [
    	{ name: 'ruleid', type: 'string' },
    	{ name: 'size', type: 'string' },
    	{ name: 'ZScore', type: 'string' },
    	{ name: 'complexity', type: 'string' }
    ],
    datatype: 'json',
    localdata: data
};
var adapter = new $.jqx.dataAdapter(source);
// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
    var id = record.uid.toString();
    var grid = $($(parentElement).children()[0]);
    var nestedSource =
    {
        datafields: [
...