--- title: "ZingGrid Object Usage | Docs" description: "ZingGrid has defined methods on the ZingGrid window level object. This is the definitive API documentation of those methods." url: https://www.zinggrid.com/docs/v1/api/methods/zinggrid-object --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/v1/api/methods/zinggrid-object.md mode: provenance representation: markdown origin_response_id: 41c0bc307880922670ca98fa57ec37e2 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.743Z version_nonce: 6c16ec8d58e22e47973b46baf9a6bf75 generated_at_utc: 2026-11-01T12:28:34.422Z response_nonce: 8c00ff8c78724f41c89a4b519cde65a3 ``` # 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. > **Note:** Check out the [docs on `` attributes](https://www.zinggrid.com/docs/api/tags/zg-param) to get a full list of available adapter options here. ### Function Definition ```javascript ZingGrid.registerAdapter(sType, oOptions) ``` Arguments | 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 **ANY**`zg-param` value here. | ### HTML before `registerAdapter()` ```html ``` ### HTML after `registerAdapter()` ```html ``` ### JavaScript ```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: [Example code](https://app.zingsoft.com/demos/embed/FCWB5U24) ## registerCellType() You use the `registerCellType()` method to create and assign a custom column type. ### Function Definition ```javascript ZingGrid.registerCellType(sType, oOptions) ``` Arguments | 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 ```html ``` ### JavaScript ```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: [Example code](https://app.zingsoft.com/demos/embed/T7YD4CIL) ## 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 ```javascript ZingGrid.registerClient(oClient, oScope) ``` Arguments | Name | Type | Optional | Description | | --- | --- | --- | --- | | oClient | Object | false | The client that will be used for the adapter calls | | oScope | Object | true | Scope of the client | ### HTML ```html ``` ### JavaScript ```javascript const supabaseClient = supabase.createClient(SUPABASE_URL, SUPABASE_KEY); ZingGrid.registerClient(supabaseClient); ``` ### registerClient() Grid Here is a complete grid which calls the `registerClient()` method: [Example code](https://app.zingsoft.com/demos/embed/O35N7MXC) ## 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 ```javascript ZingGrid.registerCustomFilterMethod(key, oCustomFilterObj, oScope); ``` Arguments | Name | Type | Optional | Description | | --- | --- | --- | --- | | key | String | false | The key of the custom filter method. This keys will be used to add to S13 or in S14 | | oCustomFilterObj | Object | false | Object containing the custom filter. It contains three properties: - title: What displays in the conditions selectbox - fieldCount: Number of text fields to display for this condition (0-2) - showMatchCase: Boolean indicating if match case checkbox should be displayed. Default is true. - filterMethod: Points to the method to call when filter is run. Filter method will be passed S15 object that contains: - dataVal: Value from the grid's data - \[val1\]: Value of first text field (if present) - \[val2\]: Value of second text field (if present) - matchCase: Boolean indicating if user selectd the match base checkbox | | oScope | Object | true | Scope of the filter method | ### HTML ```html ``` ### JavaScript ```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: [Example code](https://app.zingsoft.com/demos/embed/HM7JLSN1) ## registerEditor() The `registerEditor()` method is used to create and assign a custom editor to the grid. ### Function Definition ```javascript ZingGrid.registerEditor(oConfig, sName, oScope); ``` Arguments | Name | Type | Optional | Description | | --- | --- | --- | --- | | oConfig | Object | false | The object containing editor life cycle hooks for cell editing (S18, S19, S20) | | sName | String | false | String name of the custom editor | | oScope | Object | true | Scope of the editor | ### HTML ```html ``` ### JavaScript ```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: [Example code](https://app.zingsoft.com/demos/embed/AKZ56TZW) ## registerFilterer() The `registerFilterer()` method registers the life cycle hooks for filterer. ### Function Definition ```javascript ZingGrid.registerFilterer(fnMethod, sName, oScope); ``` Arguments | Name | Type | Optional | Description | | --- | --- | --- | --- | | oConfig | Object | false | Object containing filterer life cycle hooks (S23) | | sName | String | false | String name of the custom filterer | | oScope | Object | true | Scope of the filterer | ### HTML ```html ``` ### Javascript ```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: [Example code](https://app.zingsoft.com/demos/embed/C9OIO14T) ## 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 ```javascript ZingGrid.registerMethod(fnMethod, sName, oScope) ``` Arguments | 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 ```html ``` ### JavaScript ```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: [Example code](https://app.zingsoft.com/demos/embed/IS6Q1HGM) ## 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 ```javascript ZingGrid.registerNamespace(oNamespace, sName, oScope) ``` Arguments | 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, S31 will be set to the S32 value. Defaults to the namespace itself. | ### HTML ```html ``` ### JavaScript ```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: [Example code](https://app.zingsoft.com/demos/embed/SV33R7QE) ## registerValidator() To register life cycle hooks for cell validation, use `registerValidator()`. ### Function Defintiion ```javascript ZingGrid.registerValidator(oValidator, sName, oScope); ``` Arguments | Name | Type | Optional | Description | | --- | --- | --- | --- | | oValidator | Object | false | Object of validator life cycle hooks to expose to the grid | | sName | String | true | The name to refer to the validator. | | oScope | Object | true | Scope of the validator | ### HTML ```html ``` ### JavaScript ```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: [Example code](https://app.zingsoft.com/demos/embed/WZY73AVD) ## customizeDialog() Use `customizeDialog()` to customize the dialog for all instances of ZIngGrid. ### Function Defintiion ```javascript ZingGrid.customizeDialog(type, config); ``` Arguments | Name | Type | Optional | Description | | --- | --- | --- | --- | | type | String | false | Type of dialog to customize. If set to S37, the config will apply to all dialogs. The options are: field-update, record-create, record-delete, record-info, record-update, view-error, view-info, view-success, view-warn, zg-version. | | config | Object | false | Options for data retrieval. The options are: - cancel: Text for cancel button - confirm: Text for confirm button - label: Label to display on the dialog | ### HTML ```html ``` ### JavaScript ```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: [Example code](https://app.zingsoft.com/demos/embed/3IZ0BXVZ) ## formatDate() Use `customizeDialog()` to customize the dialog for all instances of ZIngGrid. ### Function Defintiion ```javascript ZingGrid.customizeDialog(type, config); ``` Arguments | Name | Type | Optional | Description | | --- | --- | --- | --- | | type | String | false | Type of dialog to customize. If set to S40, the config will apply to all dialogs. The options are: field-update, record-create, record-delete, record-info, record-update, view-error, view-info, view-success, view-warn, zg-version. | | config | Object | false | Options for data retrieval. The options are: - cancel: Text for cancel button - confirm: Text for confirm button - label: Label to display on the dialog | ### HTML ```html ``` ### JavaScript ```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: [Example code](https://app.zingsoft.com/demos/embed/3IZ0BXVZ) ## fromNow() The `fromNow()` formats a `Date` object in "from now" format. ### Function Defintiion ```javascript ZingGrid.fromNow(date, raw, lang); ``` Arguments | Name | Type | Optional | Description | | --- | --- | --- | --- | | date | SDate | false | The S44 to format | | raw | Boolean | false | Indicates if we should include "ago/to" to indicate past/future | | lang | String | true | The language to use for formatting | ### HTML ```html ``` ### JavaScript ```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: [Example code](https://app.zingsoft.com/demos/embed/DOHQJTDO) Use `customizeDialog()` to customize the dialog for all instances of ZIngGrid. ### Function Defintiion ```javascript ZingGrid.customizeDialog(type, config); ``` Arguments | Name | Type | Optional | Description | | --- | --- | --- | --- | | type | String | false | Type of dialog to customize. If set to S47, the config will apply to all dialogs. The options are: field-update, record-create, record-delete, record-info, record-update, view-error, view-info, view-success, view-warn, zg-version. | | config | Object | false | Options for data retrieval. The options are: - cancel: Text for cancel button - confirm: Text for confirm button - label: Label to display on the dialog | ### HTML ```html ``` ### JavaScript ```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: [Example code](https://app.zingsoft.com/demos/embed/3IZ0BXVZ) ## searchIsTable() Use `searchIsTable()` method to search for table element(s) with the `[is="zing-grid"]` attribute to insert the ``. This method shoud only be used when `table[is="zing-grid"]` is added after the `Document` has been loaded. ### Function Defintiion ```javascript ZingGrid.searchIsTable(); ``` ### HTML ```html
``` ### JavaScript ```javascript ZingGrid.searchIsTable(); ``` ### searchIsTable() Grid Here is a complete grid which calls the `searchIsTable()` method: [Example code](https://app.zingsoft.com/demos/embed/5RH46IV4) ## setLicense() The `setLicense()` method is used to set the license and removes the watermark is the given license is valid. ### Function Defintiion ```javascript ZingGrid.setLicense(aLicense, aBuildCode); ``` Arguments | Name | Type | Optional | Description | | --- | --- | --- | --- | | aLicense | String Array | false | List of license keys | | aBuildCode | String Array | true | List of build codes | ### JavaScript ```javascript ZingGrid.setLicense(['LICENCE_KEY']); ``` ### setLicense() Grid Here is a complete grid which calls the `setLicense()` method: [Example code](https://app.zingsoft.com/demos/embed/UVW8048Q) ## setBuildCode() The `setBuildCode()` method is used to set the build code and removes the watermark is the given build code is valid. ### Function Defintiion ```javascript ZingGrid.setBuildCode(aBuildCode); ``` Arguments | Name | Type | Optional | Description | | --- | --- | --- | --- | | aBuildCode | String Array | false | The first element of the array is the build code, and the second element is the build code id. | ### JavaScript ```javascript ZingGrid.setBuildCode(['BUILD_CODE', 'BUILD_CODE_ID']); ``` ### setBuildCode() Grid Here is a complete grid which calls the `setBuildCode()` method: [Example code](https://app.zingsoft.com/demos/embed/WXH2X6KM)