JavaScript Grid

Set the ready 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="jqxgrid"></div>

JavaScript

$(document).ready(function() {
  var localizationobj = {};
  $("#jqxgrid").bind('bindingcomplete', function () {
    filterstringcomparisonoperators = ['Contains', 'Does not contain', 'Empty', 'Not empty'];
    filternumericcomparisonoperators = ['Equal', 'Not equal', 'Null', 'Not null'];
    filterdatecomparisonoperators = ['less than', 'greater than'];
    filterbooleancomparisonoperators = ['Equal', 'Not equal'];
    localizationobj.filterstringcomparisonoperators = filterstringcomparisonoperators;
    localizationobj.filternumericcomparisonoperators = filternumericcomparisonoperators;
    localizationobj.filterdatecomparisonoperators = filterdatecomparisonoperators;
    localizationobj.filterbooleancomparisonoperators = filterbooleancomparisonoperators;
  });
  $("#jqxgrid").jqxGrid('localizestrings', localizationobj);
  var data = generatedata(500);
  var source = {
    localdata: data,
    datafields: [{
      name: 'name',
      type: 'string'
    }, {
      name: 'productname',
      type: 'string'
    }, {
      name: 'available',
      type: 'bool'
    }, {
      name: 'date',
      type: 'date'
    }, {
      name: 'quantity',
      type: 'number'
    }],
    datatype: "array"
  };

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

  $("#jqxgrid").jqxGrid({
      width: 850,
      source: dataAdapter,
      showfilterrow: true,
      filterable: true,
      localization: loc,
      selectionmode: 'multiplecellsextended',
      updatefilterconditions: function(type, defaultconditions) {
        var stringcomparisonoperators = ['CONTAINS', 'DOES_NOT_CONTAIN', 'EMPTY', 'NOT_EMPTY'];
        var numericcomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'NULL', 'NOT_NULL'];
        var datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
        var booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
        switch (type) {
          case 'stringfilter':
            return stringcomparisonoperators;
          case 'numericfilter':
            return...