JavaScript Grid

Bind to the rowselect event by type: jqxGrid. Author: http://jqwidgets.com

by musicreader

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>
<button id="button1">
Button 1
</button>

<button id="button2">
Button 2
</button>


<button id="button3">
Button 3
</button>

<div id='jqxButtonGroup'>
    <button style="padding:4px 16px;" id="Left">Left</button>
    <button style="padding:4px 16px;" id="Center">Center</button>
    <button style="padding:4px 16px;" id="Right">Right</button>
</div>


Click on a row to select it
<div id="jqxgrid"></div>

JavaScript

var data = generatedata(500);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
 		touchmode:false,
     width: 500,
     theme: 'energyblue',
     source: adapter,
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         columngroup: 'Name',
         width: 90
     }, {
         text: 'Last Name',
         columngroup: 'Name',
         datafield: 'lastname',
         width: 90
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 170
     }, {
         text: 'Order Date',
         datafield: 'date',
         width: 160,
         cellsformat: 'dd-MMMM-yyyy'
     }, {
         text: 'Quantity',
         datafield: 'quantity',
         width: 80,
         cellsalign: 'right'
     }, {
         text: 'Unit Price',
         datafield: 'price',
         cellsalign: 'right',
         cellsformat: 'c2'
     }]
 });
 $('#jqxgrid').on('rowselect', function (event) {
     alert("Row with bound index: " + event.args.rowindex + " has been selected");
 });
 
 document.getElementById("button2").addEventListener("pointerdown", function(){
  	alert("test2 p");
  });
 
  $('#button1').on('click',function(){
  	alert("test1");
  });
  
  $('#button3').jqxButton({
    theme: 'energyblue'
});
  $('#button3').on('click', function () {
  	alert("test3");
  }); 
  
  $('#jqxButtonGroup').jqxButtonGroup({
    mode: 'radio',
    theme: 'energyblue'
});