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.
Check out the docs on <zg-param>
attributes to get a full list of available adapter options here.
Function Definition
ZingGrid.registerAdapter(sType, oOptions)
Name | Type | Optional | Description |
---|---|---|---|
sType | String | false | The string name for the adapter |
oOptions | Object | false | Option list of of adapter variables you want to define. You can define ANYzg-param value here. |
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)
Name | Type | Optional | Description |
---|---|---|---|
sType | String | false | The name of the cell type you want to define |
oOptions | Object | false | An object to define the renderer and/or editor for the cell type |
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:

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)
Name | Type | Optional | Description |
---|---|---|---|
fnMethod | Function | false | The method that you want to expose to ZingGrid |
sName | String | true | 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. |
oScope | Object | true | The scope of the method. When the method is called, this will be set to the scope value. |
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)
Name | Type | Optional | Description |
---|---|---|---|
oNamespace | Function | false | The namespace that you want to expose to ZingGrid |
sName | String | true | The name to reference the namespace |
oScope | Object | true | 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
<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:

[api: ZingGrid object]