JavaScript Grid

Invoke the updatebounddata method 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='jqxWidget'>
    <div id="jqxgrid"></div>
</div>
<div id="popover">
    <div id="popOverData" style="padding:5px;">
    </div>
</div>
<input type="button" style="margin: 10px;" id="jqxbutton" value="Update bounded data" />

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 bindPopover = function () {
  if ($(".grids-popover").length > 0) {
    $("#popover").jqxPopover({ 
      position: "right",
      offset: { left: 0, top: 0 }, 
      showCloseButton: false,
      selector: $(".grids-popover")
    });

    $(".grids-popover").on("mouseenter", function () {
      $("#popOverData").html("Test PopOver Content.");
      var id = $(this).attr('id');
      $("#popover").jqxPopover({ selector: "#" + id });
      $("#popover").jqxPopover("open");
    });
    $(".grids-popover").on("mouseleave", function () {
      $("#popover").jqxPopover("close");
    });
  }
};

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

$("#jqxgrid").on('bindingcomplete', function () {
  console.log('binding is completed');
  bindPopover();
});

var ms_cellRenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
  var rowId = row + "-grids-popover";
  return '<div class="grids-popover" id="' + rowId + '" style="margin-left:5px; margin-top:10px; cursor: pointer;">' + value + ' <span class="glyphicon glyphicon-info-sign" style="color:lightblue"></span></div>';
}
$("#jqxgrid").jqxGrid({
  width: 500,
  theme: 'energyblue',
  source: adapter,
  sortable: true,
  selectionmode: 'singlecell',
  editable: true,
  editmode: 'click',
  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,
    cellsrenderer: ms_cellRenderer
  }, {
    text:...