API Methods

ZingGrid provides a rich API for controlling grid interactions – from re-rendering to adjusting user interactions (like paging) through JavaScript. As an object, ZingGrid comes with its own set of methods that get/set properties and manipulate its contents.

ZingGrid Methods

ZingGrid refers to the grid tag (<zing-grid>) itself. Grid-specific methods include getting the current grid dimensions, refreshing the grid, and a 'ready' callback function (ZingGrid Methods Playground).

For display purposes, the methods on this page are broken out by grid element, but all methods are called from the <zing-grid> tag.

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.executeOnLoad(function() {
  zgRef.getHeight()
});

Caption Methods

zg-caption is the text on the top section of the grid (when enabled). Its methods get/set the caption text (Caption Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.setCaption("I am the caption");
zgRef.getCaption();

Card Methods

zg-card methods allow customizing default card templates (Card Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.setCardTemplate('templateId');

Cell Methods

zg-cell refers to the cells of the grid. Its methods get data on a specific cell, or all cells of the grid (Cell Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.cell(1, 2);
zgRef.getCells();`;

Column Methods

zg-column methods manipulate columns by sorting, filtering, or hiding targeted columns (Column Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.hideColumn('password');
zgRef.sortColumn('lastName', 'asc');

Data Methods

zg-data methods allow changing or grabbing data in the grid (Data Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.setData('[1, 2, 3]');
zgRef.getSrc();

Dialog Methods

zg-dialog methods allow customizing default dialog box text (Dialog Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.customizeDialog('record-update', {
  cancel: 'cancel button text',
  confirm: 'confirmation button text',
  title: 'dialog box title'
});

Editor Methods

zg-editor enables users to make edits to the grid. Its methods can toggle the editor, set type, or grab the attribute value of the editor (Editor Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.setEditor('row');
zgRef.getEditor();

Filter Methods

Filter methods can toggle the filter or get its attribute value (Filter Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.setFilter();
zgRef.getFilter();

Methods that affect the table footer (Foot Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.getFootClass();

Methods that affect the table headers (Head Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.getHeadClass();

Icon Methods

Methods allow adding and manipulating user defined icon sets (Icon Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.getIconSet();

Layout Methods

Methods will adjust the current grid layout displaying (Layout Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.setLayout('card');

There are two ways to open the context menu. First way is by using the static menu, which is located in the top grid control bar (when enabled). Second, is by right-clicking a cell to open the context menu. (Menu Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.setContentMenu();
zgRef.closeContextMenu();

Pager Methods

Pager is located at the bottom of the grid, and provides a way to navigate through the grid. zg-pager methods allow you to change pages and set page size or options (Pager Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.setPager();
zgRef.setPageSize(10);
zgRef.lastPage();

Row Methods

Methods that refers to a row in the grid. Row methods allow you to add a new row to the grid. (Row Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.insertRow();

Methods to toggle search (Search Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.setSearch();

Selector Methods

Methods that allow users to make a selection on the grid by outlining the selected cell(s). (Selector Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.setSelector();
zgRef.getSelector();

Sorter Methods

Methods enable sorting a column, which is triggered by clicking on column headers (Sorter Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.setSorter();
zgRef.getSorter();

Source Methods

Methods allow changing of the grid data reference or source (Source Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.setSource('New Source: https://www.zinggrid.com');

Theme Methods

Methods allows changing the theme of the grid. Currently zing-grid comes with a couple default themes like: Default, iOS, and Android. (Theme Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.setTheme('ios');
zgRef.getTheme();

Viewport Methods

Methods allowed on adjusting our viewport manager. The viewport manager is used to read size mutations on the window and grid (Viewport Methods Playground).

Example Usage

CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.getViewport();
loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading