JavaScript Grid

Bind to the rowselect event by type: 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='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <h3>
            Customers</h3>
        <div id="customersGrid">
        </div>
        <h3>
            Orders by Customer</h3>
       <div id="ordersGrid">
    </div>
    </div>
    <button id="jqxbutton2">Action Button</button>
    <button id="jqxbutton3">Action Button 2</button>

JavaScript

// prepare the data
            var source =
            {
                datafields: [
                    { name: 'CustomerID' },
                    { name: 'CompanyName' },
                    { name: 'ContactName' },
                    { name: 'ContactTitle' },
                    { name: 'Address' },
                    { name: 'City' },
                    { name: 'Country' },
                    { name: 'Icons' }
                ],
                localdata: [{ "CustomerID": "ALFKI", "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Region": null, "PostalCode": 12209, "Country": "Germany", "Phone": "030-0074321", "Fax": "030-0076545" },
                { "CustomerID": "ALFKIa", "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Region": null, "PostalCode": 12209, "Country": "Germany", "Phone": "030-0074321", "Fax": "030-0076545" }]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#customersGrid").jqxGrid(
            {
                width: 850,
                height: 120,
                source: dataAdapter,
                selectionmode: 'checkbox',
                keyboardnavigation: false,
                columns: [
                    { text: 'Icons', datafield: 'Icons', width: 150 },
                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                    { text: 'City', datafield: 'City', width: 120 },
                    { text: 'Country', datafield: 'Country'}
                ]
            });
            // Orders Grid
            // prepare the data
            var dataFields = [
               ...