JavaScript Grid

Invoke the updatebounddata method of the jqxGrid. Author: http://jqwidgets.com

by Alexey Sharifullin

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'>
    <div id="jqxgrid"></div>
</div>
<input type="button" style="margin: 10px;" id="jqxbutton" value="Update bounded data" />

JavaScript

var data = [];
 var source = {
     localdata: data,
     datafields: [{"name":"name","type":"string"},{"name":"type","type":"string"},{"name":"format","type":"string"},{"name":"text","type":"string"},{"name":"datafield","type":"string"},{"name":"displayfield","type":"string"},{"name":"sortable","type":"boolean"},{"name":"filterable","type":"boolean"},{"name":"hideable","type":"boolean"},{"name":"hidden","type":"boolean"},{"name":"groupable","type":"boolean"},{"name":"menu","type":"number"},{"name":"exportable","type":"boolean"},{"name":"columngroup","type":"string"},{"name":"enabletooltips","type":"boolean"},{"name":"columntype","type":"string"},{"name":"cellsalign","type":"string"},{"name":"cellsformat","type":"string"},{"name":"aggregates","type":"string"},{"name":"align","type":"string"},{"name":"editable","type":"boolean"},{"name":"width","type":"number"},{"name":"minwidth","type":"number"},{"name":"maxwidth","type":"number"},{"name":"resizable","type":"boolean"},{"name":"draggable","type":"boolean"},{"name":"classname","type":"string"},{"name":"cellclassname","type":"string"},{"name":"pinned","type":"boolean"},{"name":"nullable","type":"boolean"},{"name":"nullable2","type":"boolean"},{"name":"filterdelay","type":"number"},{"name":"filtertype","type":"string"}
     ],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 

 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     source: adapter,
     sortable: true,
     selectionmode: 'singlecell',
     columngroups:[{"text":"datafields","name":"datafields"},{"text":"columns","name":"columns"}],
     columns:...