EnhanceDataGrid

Example

const grid = new EnhanceDataGrid();
grid.jqxGrid;

See:

• for dataAdapter, refer jqxAdapter API, search for keyword 'source' at jqxGrid API.

Example

const source_json_object = {
  url: 'url.php',
  datafields: [
    { name: 'id', type: 'number' },
    ...
  ],
};
const source_url_object = {
  id: 'id',
  datafields: [
    { name: 'id', type: 'number' },
    ...
  ],
  // example for JSON
  datatype: "json",
  url: 'url.php',
  // example for local Array
  datatype: "array",
  localdata: [Array of Object],
};
// default syntax
const grid = new EnhanceDataGrid({
  // Preset jqxGrid properties
  width              : '100%',
  height             : '100%',
  sortable           : true,
  filterable         : true,
  filtermode         : 'excel',
  enabletooltips     : true,
  showaggregates     : true,
  // showstatusbar      : true,
  // EnhanceDataGrid properties
  id                 : '#grid_id',
  // using either one, (1)jsonSource | (2)dataSource
  jsonSource         : source_json_object, // method (1)
  dataSource         : source_url_object,  // method (2), refer to setSourceUrl() method for example
  // dateFormat         : 'yyyy-MM-dd',
  checkedDatafield   : 'checked',
  buttonTheme        : 'fresh',
  useBootstrap       : true,
  centeredColumns    : true,
  showRowIndex       : false,
  rowIndexWidth      : 100,
  searchInput        : true,
  showFindButton     : false,
  showFilterButton   : false,
  showFilterRowButton: false,
  enterFilter        : false,
  enterFind          : true,
  autoFilter         : true,
  autoFind           : true,
  autoDelayTiming    : 500, // in miliseconds
  tbElement          : [
    { button: 'reload' },
    { button: 'add', win: '#jqxWindow_id', form: '#form_id', winOpenOnButton: false,
      beforeClick: function() {
        // code to be run before button.on('click')
      },
      click: function() {
        // if provided, the function will overwrite button default behaviour
      },
      afterClick: function() {
        // code to be run after button.on('click')
      },
    },
    { button: 'edit', modal: '#modal_id', form: '#form_id' },
    { button: 'delete',
      check: function() {
        if ($checking_not_passed)
          return false;
        else
          return true;
      },
      success: function() {
        // your own coding
        // works ONLY when POST AJAX returned result in JSON form with { success: 1 }
      },
      fail: function() {
        // your own coding
        // works ONLY when POST AJAX returned result in JSON form with { success: 0 }
      },
      // url in String form
      url  : 'delete.php',
      param: { param_1: value_1, param_2: value_2 },                         // use this format when your parameters are decided before Grid init and then fix.
      param: function() { return { param_1: value_1, param_2: value_2 }; },  // use this format when your parameters are decided when button click (Recommended)
      // url in Function form
      url: function(row_data, data_id) {
        // your own code
      },
    },
    { button: 'divider' },
    { button: 'excel', filename: 'Excel_FIlename_When_Export' },
    { button: 'csv', filename: 'CSV_FIlename_When_Export' },
  ],
});
// new syntax
const grid = new EnhanceDataGrid('#grid_id', {
  id: '#grid_id',
  ...
});