ZingGrid Object

This is a comprehensive doc 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 src 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.

Read docs on zg-param attributes to get a full list of available adapter options here.

CloseCopy Copied
ZingGrid.registerAdapter(sType, oOptions)
Arguments
NameTypeOptionalDescription
sTypeStringfalse The string name for the adapter.
oOptionsObjectfalse Option list of of adapter variables you want to define. You can define ANYzg-param value here.

HTML before registerAdapter()

CloseCopy Copied
<zing-grid editor caption="Movies" search pager page-size="10">
  <zg-data src="https://zinggrid-examples.firebaseio.com/movies/" adapter="customFirebaseAdapter">
    <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()

CloseCopy Copied
<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

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

ZingGrid.registerAdapter('myCustomAdapter', adapterOptions);

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

registerCellType()

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

Function Definition

CloseCopy Copied
ZingGrid.registerCellType(sType, oOptions)
Arguments
NameTypeOptionalDescription
sTypeStringfalse The name of the cell type you want to define.
oOptionsObjectfalse An object to define the renderer and/or editor for the cell type.

HTML

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

Javascript

CloseCopy Copied
// 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,
});

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

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

CloseCopy Copied
ZingGrid.registerMethod(fnMethod, sName, oScope)
Arguments
NameTypeOptionalDescription
fnMethodFunctionfalse The method that you want to expose to ZingGrid.
sNameStringtrue The name to refer to the method. If the method is not anonymous, the name will default to the name of the method. If it is anonymous, a name must be set. Whatever is set here is how you should refer to the method in the grid.
oScopeObjecttrue The scope of the method. When the method is called this will be set to the scope value.

HTML

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

Javascript

CloseCopy Copied
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);

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

registerNamespace()

You use the registerNamespace() method to assign a namespace alias so that all methods outside the window scope can be found, and assign 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

CloseCopy Copied
ZingGrid.registerNamespace(oNamespace, sName, oScope)
Arguments
NameTypeOptionalDescription
oNamespaceFunctionfalse The namespace that you want to expose to ZingGrid.
sNameStringtrue The name to reference the namespace.
oScopeObjecttrue The scope of the namespace. When a method within the namespace is called, this will be set to the `scope` value. Defaults to the namespace itself.

HTML

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

Javascript

CloseCopy Copied
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);

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading