Html Grid

Set the source 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>
<div id="treeGrid"></div>

JavaScript

var DataItem = [
    {"DataID":"1", "DataName":"dataname1" },
    {"DataID":"2", "DataName":"dataname2" },
    {"DataID":"3", "DataName":"dataname3" },
    {"DataID":"4", "DataName":"dataname4" },
    {"DataID":"5", "DataName":"dataname5" },
    {"DataID":"6", "DataName":"dataname6" },
    {"DataID":"7", "DataName":"dataname7" },
];




var source1 =
    {
        datatype: "json",
        datafields: [
            { name: 'DataID', type: 'string' },
            { name: 'DataName', type: 'string' }
        ],
        id: 'dataID',
        localdata: DataItem
    };

var dataAdapter1 = new $.jqx.dataAdapter(source1);

$("#treeGrid").jqxGrid(
    {
        //width: 850,
        autoHeight: true,
        source: dataAdapter1,
        columnsresize: true,
        columns: [
            { text: 'ID', datafield: 'DataID'/*, width: 250*/ },
            { text: 'Name', datafield: 'DataName'/*, width: 250*/ }
        ]
    });