ZingGrid Object Methods

This is a comprehensive list of available functionality on the global window.ZingGrid object. It is redundant to define window, so we will call this the ZingGrid object.

registerAdapter()

You use the registerAdapter() method to define how to hook up a data source into your project. If you have your own standardized endpoints, this is very useful as it's a way for us to provide an ES6 style import mechanism and pattern for building custom data sources.

Function Definition

ZingGrid.registerAdapter(sType, oOptions)

HTML before registerAdapter()

<zing-grid editor caption="Movies" page-size="10" infinite height="100px">
  <zg-data src="https://zinggrid-examples.firebaseio.com/movies/">
    <zg-param name="startAtKey" value="startAt"></zg-param>
    <zg-param name="limitToKey" value="limitToFirst"></zg-param>
    <zg-param name="sortByKey" value="orderBy"></zg-param>
    <zg-param name="searchKey" value="equalTo"></zg-param>
    <zg-param name="startAtValue" value="true"></zg-param>
    <zg-param name="addValueQuotes" value="true"></zg-param>
    <zg-param name="sortBy" value="title"></zg-param>
  </zg-data>
</zing-grid>

HTML after registerAdapter()

<zing-grid editor caption="Movies" page-size="10" infinite height="100px">
  <zg-data src="https://zinggrid-examples.firebaseio.com/movies/" adapter="myCustomAdapter"></zg-data>
</zing-grid>

JavaScript

const adapterOptions = {
  limitToKey: 'limitToFirst',
  startAtKey: 'startAt',
  sortByKey: 'orderBy',
  startAtValue: true,
  sortBy: '"title"',
};

ZingGrid.registerAdapter('myCustomAdapter', adapterOptions);

registerAdapter() Grid

Here is a complete grid which calls the registerAdapter() method:

registerCellType()

You use the registerCellType() method to create and assign a custom column type.

Function Definition

ZingGrid.registerCellType(sType, oOptions)

HTML

<zg-column index="col" type="upper" header="College"></zg-column>

JavaScript

// renderer function for cell
function upperRenderer(mRawData, cellRef, $cell) {
  return mRawData.toUpperCase();
}

// hooks for editor
let editor = {
  init($cell, editorField) {
    let oDOMInput = document.createElement('input');
    oDOMInput.type = 'text';
    oDOMInput.autoComplete = 'off';
    oDOMInput.ariaInvalid = false;
    editorField.appendChild(oDOMInput);
  },

  onOpen($cell, editorField, mData) {
    let oDOMInput = editorField.querySelector('input');
    if (!mData) {
      mData = editorField.value || '';
    }
    oDOMInput.value = String(mData);
  },

  onClose(editorField) {
    return 'Edited: ' + editorField.querySelector('input').value;
  },
};

ZingGrid.registerCellType('upper', {
  editor: editor,
  renderer: upperRenderer,
});

registerCellType() Grid

Here is a complete grid which calls the registerCellType() method:

registerClient()

You use the registerClient() method to register a third party client to make it available to ZingGrid for JS adapter calls. Currently configured for supabaseJS adapter.

Function Definition

ZingGrid.registerClient(oClient, oScope)

HTML

<zing-grid>
  <zg-data adapter="supabaseJS">
    <zg-param name="dataTable" value="employee_list"></zg-param>
  </zg-data>
</zing-grid>

JavaScript

const supabaseClient = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
ZingGrid.registerClient(supabaseClient);

registerClient() Grid

Here is a complete grid which calls the registerClient() method:

registerCustomFilterMethod()

The registerCustomFilterMethod() method registers a custom filter method. The custom filter method can then be added to the list of filter conditions that a column can be filtered by.

Function Definition

ZingGrid.registerCustomFilterMethod(key, oCustomFilterObj, oScope);

HTML

<zing-grid filter filter-conditions="customCondition, break, default">

JavaScript

let customCondition = {
  title: "Starts With M",
  fieldCount: 0,
  filterMethod: (oConfig) => {
    return oConfig.dataVal.indexOf('M') === 0;
  }
};

ZingGrid.registerCustomFilterMethod('customCondition', customCondition);

registerCustomFilterMethod() Grid

Here is a complete grid which calls the registerCustomFilterMethod() method:

registerEditor()

The registerEditor() method is used to create and assign a custom editor to the grid.

Function Definition

ZingGrid.registerEditor(oConfig, sName, oScope);

HTML

<zg-column index="col" editor="prependEdited"></zg-column>

JavaScript

// hooks for editor
let editor = {
  init($cell, editorField) {
    let oDOMInput = document.createElement('input');
    oDOMInput.type = 'text';
    oDOMInput.autoComplete = 'off';
    oDOMInput.ariaInvalid = false;
    editorField.appendChild(oDOMInput);
  },

  onOpen($cell, editorField, mData) {
    let oDOMInput = editorField.querySelector('input');
    if (!mData) {
      mData = editorField.value || '';
    }
    oDOMInput.value = String(mData);
  },

  onClose(editorField) {
    return 'Edited: ' + editorField.querySelector('input').value;
  },
};

ZingGrid.registerEditor(editor, 'prependEdited');

registerEditor() Grid

Here is a complete grid which calls the registerEditor() method:

registerFilterer()

The registerFilterer() method registers the life cycle hooks for filterer.

Function Definition

ZingGrid.registerFilterer(fnMethod, sName, oScope);

HTML

<zg-column index="last" filterer="lettersOnly"></zg-column>

Javascript

let customFilter = { 
  afterInit(oDOMFilter) {
    let oDOMInput = oDOMFilter.querySelector('input');
    oDOMInput.addEventListener('keypress', (e) => {
      if (!/^[a-z]$/i.test(e.key)) e.preventDefault();
    });
  },
};

ZingGrid.registerFilterer(customFilter, 'lettersOnly');

registerFilterer() Grid

Here is a complete grid which calls the registerFilterer() method:

registerMethod()

You use the registerMethod() method to assign an alias to a single method outside the window scope, which will be found and assigned a scope reference to this.

Function Definition

ZingGrid.registerMethod(fnMethod, sName, oScope)

HTML

<zg-column index="high" type="currency"  cell-class="f1"></zg-column>
<zg-column index="low" type="currency" cell-class="f2"></zg-column>

JavaScript

const namespace1 = {
  // global vars for highlight min/max values
  gHigh: -1,
  gLow: Number.MAX_SAFE_INTEGER,

  // highlight cell with highest value in high column
  _highlightHigh: function(high, cellDOMRef, cellRef) {
    if (high == Number(this.gHigh)) return 'highlight';
  },

  // highlight cell with lowest value in low column
  _highlightLow: function(low, cellDOMRef, cellRef) {
    if (low == Number(this.gLow)) return 'highlight';
  },

  };

  // register methods to alias "f1" and "f2" where "this" references the 
  // namespace1 scope as well
  ZingGrid.registerMethod(namespace1._highlightHigh, 'f1', namespace1);
  ZingGrid.registerMethod(namespace1._highlightLow, 'f2', namespace1);

registerMethod() Grid

Here is a complete grid which calls the registerMethod() method:

registerNamespace()

You use the registerNamespace() method to assign a namespace alias so that all methods outside the window scope can be found, and assigned a scope reference to this. Once a namespace is registered, the methods within the namespace will be accessible to ZingGrid without having to call ZingGrid.registerMethod.

Function Definition

ZingGrid.registerNamespace(oNamespace, sName, oScope)

HTML

<zg-column index="low" type="currency" cell-class="n1._highlightLow"></zg-column>

JavaScript

const namespace1 = {
  // global vars for highlight min/max values
  gHigh: -1,
  gLow: Number.MAX_SAFE_INTEGER,
  
  // highlight cell with lowest value in low column
  _highlightLow: function(low, cellDOMRef, cellRef) {
    if (low == Number(this.gLow)) return 'highlight';
  },

};

// register namespace to alias "n1" where "this" references the 
// namespace1 scope as well
ZingGrid.registerNamespace(namespace1, 'n1', namespace1);

registerNamespace() Grid

Here is a complete grid which calls the registerNamespace() method:

registerValidator()

To register life cycle hooks for cell validation, use registerValidator().

Function Defintiion

ZingGrid.registerValidator(oValidator, sName, oScope);

HTML

<zg-column index="first" validator="customValidator"></zg-column>

JavaScript

let customValidator = function(text) {
  return text.includes('testing');
};

ZingGrid.registerValidator(customValidator, 'customValidator');

registerValidator() Grid

Here is a complete grid which calls the registerValidator() method:

customizeDialog()

Use customizeDialog() to customize the dialog for all instances of ZIngGrid.

Function Defintiion

ZingGrid.customizeDialog(type, config);

HTML

<zing-grid editor="modal">

JavaScript

ZingGrid.customizeDialog('field-udpate', {
  cancel: 'CANCEL ACTION',
  confirm: 'CONFIRM ACTION',
  label: 'DIALOG ACTIONS'
});

customizeDialog() Grid

Here is a complete grid which calls the customizeDialog() method:

formatDate()

Use customizeDialog() to customize the dialog for all instances of ZIngGrid.

Function Defintiion

ZingGrid.customizeDialog(type, config);

HTML

<zing-grid editor="modal">

JavaScript

ZingGrid.customizeDialog('field-udpate', {
  cancel: 'CANCEL ACTION',
  confirm: 'CONFIRM ACTION',
  label: 'DIALOG ACTIONS'
});

customizeDialog() Grid

Here is a complete grid which calls the customizeDialog() method:

fromNow()

The fromNow() formats a Date object in "from now" format.

Function Defintiion

ZingGrid.fromNow(date, raw, lang);

HTML

<zg-column index="date" type="date" renderer="renderDate"></zg-column>

JavaScript

let renderDate = function(date) {
  return `${ZingGrid.fromNow(date, true)} too late`;
};

ZingGrid.registerMethod(renderDate, 'renderDate');

fromNow() Grid

Here is a complete grid which calls the fromNow() method:

Use customizeDialog() to customize the dialog for all instances of ZIngGrid.

Function Defintiion

ZingGrid.customizeDialog(type, config);

HTML

<zing-grid editor="modal">

JavaScript

ZingGrid.customizeDialog('field-udpate', {
  cancel: 'CANCEL ACTION',
  confirm: 'CONFIRM ACTION',
  label: 'DIALOG ACTIONS'
});

customizeDialog() Grid

Here is a complete grid which calls the customizeDialog() method:

searchIsTable()

Use searchIsTable() method to search for table element(s) with the [is="zing-grid"] attribute to insert the <zing-grid>. This method shoud only be used when table[is="zing-grid"] is added after the Document has been loaded.

Function Defintiion

ZingGrid.searchIsTable();

HTML

<table is="zing-grid"></table>

JavaScript

ZingGrid.searchIsTable();

searchIsTable() Grid

Here is a complete grid which calls the searchIsTable() method:

setLicense()

The setLicense() method is used to set the license and removes the watermark is the given license is valid.

Function Defintiion

ZingGrid.setLicense(aLicense, aBuildCode);

JavaScript

ZingGrid.setLicense(['LICENCE_KEY']);

setLicense() Grid

Here is a complete grid which calls the setLicense() method:

setBuildCode()

The setBuildCode() method is used to set the build code and removes the watermark is the given build code is valid.

Function Defintiion

ZingGrid.setBuildCode(aBuildCode);

JavaScript

ZingGrid.setBuildCode(['BUILD_CODE', 'BUILD_CODE_ID']);

setBuildCode() Grid

Here is a complete grid which calls the setBuildCode() method: