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 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
const zgRef = document.querySelector('zing-grid');
zgRef.executeOnLoad(function() {
zgRef.getHeight()
});
Description Executes callback function when grid completes load. If grid is already loaded, it will execute immediately.
Parameters Type: functionDescription: Callback function to executeExample Input Values function() { //do something }
Returns Type: UndefinedDescription: N/ADemo Description Get the value of the compact
attribute.
Parameters Null Example Input Values Null Returns Type: String | BooleanDescription: Value of the attribute.Demo Description Get the value of the drag-action
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the gridlines
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the height
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the width
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the compact
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the drag-action
attribute.
Parameters Type: EnumDescription: Type of drag to enableExample Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the draggable
attribute.
Parameters Type: Boolean | EnumDescription: Boolean value to indicate add or remove, or string value to indicate the draggable type.Example Input Values true
false
"rows"
"columns"
"both"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the gridlines
attribute.
Parameters Type: EnumDescription: type of gridlines to set on the gridExample Input Values "both"
"horz"
"horizontal"
"vert"
"vertical"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the height
attribute.
Parameters Type: NumberDescription: Value setting the height of the grid.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the record-count
attribute.
Parameters Type: NumberDescription: Value setting the count.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the width
attribute.
Parameters Type: NumberDescription: Value setting the width of the grid.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Forces a resize event to be triggered and to partially repaint the grid. Useful when the container updates size without the window updating.
Parameters Null Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo 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
const zgRef = document.querySelector('zing-grid');
zgRef.setCaption("I am the caption");
zgRef.getCaption();
Description Get the value of the caption
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of attribute.Demo Description Set the caption text.
Parameters Type: StringDescription: Text to set the caption to. If no string is passed it will remove the caption.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo zg-card methods allow customizing default card templates (Card Methods Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.setCardTemplate('templateId');
Description Sets the id to reference an external template
to be used as zg-card
.
Parameters Type: StringDescription: Value of id to use the card template.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo zg-column methods manipulate columns by sorting, filtering, or hiding targeted columns (Column Methods Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.hideColumn('password');
zgRef.sortColumn('lastName', 'asc');
Description Fetches the targeted column.
Parameters Type: ArrayDescription: Field index of column to fetch.Example Input Values Null Returns Type: ObjectDescription: Column object.Demo Description Filters the column specified by column index. Note: filter
attribute must be present for this method to work.
Parameters Type: StringDescription: Index of column.Type: StringDescription: Filter string.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Get the value of the col-class
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the header-auto-format
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Hide a column based on index.
Parameters Type: StringDescription: Index of column to hide.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the col-class
attribute.
Parameters Type: StringDescription: class name or function nameExample Input Values "userClassName"
"functionName"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the columns
property.
Parameters Type: ArrayDescription: Array of column objectsExample Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the columns-control
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the header-auto-format
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Set column to be visible.
Parameters Type: StringDescription: Index of column to show.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sorts the given column with the given sort direction.
Parameters Type: StringDescription: Index of column to sort.Type: StringDescription: Sort Direction: asc, desc, or none.Example Input Values (firstName, asc)
(firstName, desc)
(firstName)
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Toggle the visibility of a column by index.
Parameters Type: StringDescription: Index of column to toggle.Type: BooleanDescription: Visibility of column.Example Input Values (firstName, true)
(firstName, false)
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo zg-data methods allow changing or grabbing data in the grid (Data Methods Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.setData('[1, 2, 3]');
zgRef.getSrc();
Description Fetch the internal property referencing the dataset for the grid.
Parameters Type: ObjectDescription: Options for the data retrieval. Options are:csv: Boolean indicating if it should be sent as a csv string. Default is false. headers: Boolean indicating if headers should be included. Default is false. Only applies to csv or JSON array of arrays as JSON objects have a key already. cols: String indicating if we should return all columns or only visible. 'all' or 'visible' are options. rows: String indicating if we should return all rows or only filtered/searched. 'all' or 'visible' are options. Example Input Values { csv: true, headers: true, col: "all or visible", rows: "all or visible" }
Returns Type: Array | ObjectDescription: The dataset.Demo Description Get the value of the src
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of attribute.Demo Description Get the value of the template-end-delimiter
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the template-start-delimiter
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Inserts a new row into the grid.
Parameters Type: ObjectDescription: Data to insert into new row.Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Refreshes all cells. Note: if using static data, original cell value will be restored.
Parameters Null Example Input Values Returns Type: UndefinedDescription: N/ADemo Description Set or update the dataset for the grid.
Parameters Type: Array | ObjectDescription: JSON data.Example Input Values [1, 2, 3]
[{firstName:"John", lastName:"Doe"}]
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the src
attribute.
Parameters Type: StringDescription: Value to indicate a path to a remote data source.Example Input Values https://cdn.zinggrid.com/datasets/users.json
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the template-end-delimiter
attribute.
Parameters Type: StringDescription: Value to indicate regex expression for closing data binding.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the template-start-delimiter
attribute.
Parameters Type: StringDescription: Value to indicate regex expression for opening data binding.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo zg-dialog methods allow customizing default dialog box text (Dialog Methods Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.customizeDialog('record-update', {
cancel: 'cancel button text',
confirm: 'confirmation button text',
title: 'dialog box title'
});
Description Customizes the user's dialog
Parameters Type: StringDescription: The type of dialog to customize. If you set as null, the config will be applied to all dialogs. Options are:record-create record-delete record-info record-update view-error view-info view-success view-warn zg-version Type: ObjectDescription: Options for the data retrieval. Options are:cancel: Text for the Cancel Button confirm: Text for the Confirm Button title: The Title to display on the Dialog Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo 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
const zgRef = document.querySelector('zing-grid');
zgRef.setEditor('row');
zgRef.getEditor();
Description Get the value of the editor
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the editor-controls
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the row-selector
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Sets the editor
attribute.
Parameters Type: Boolean | StringDescription: Boolean value to indicate add or remove, or string value to indicate the editor type.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the editor-controls
attribute.
Parameters Type: Boolean | StringDescription: Boolean value to indicate add or remove, or string value to indicate what editor controls to add.Example Input Values true
false
all
editor
remover
creator
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the row-selector
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Filter methods can toggle the filter or get its attribute value (Filter Methods Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.setFilter();
zgRef.getFilter();
Description Get the value of the filter
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Sets the filter
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Methods that affect the table footer (Foot Methods Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.getFootClass();
Description Get the value of the foot-class
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the foot-class
attribute.
Parameters Type: StringDescription: class name or function nameExample Input Values "userClassName"
"functionName"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Methods that affect the table headers (Head Methods Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.getHeadClass();
Description Get the value of the head-class
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the head-class
attribute.
Parameters Type: StringDescription: class name or function nameExample Input Values "userClassName"
"functionName"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Methods allow adding and manipulating user defined icon sets (Icon Methods Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.getIconSet();
Description Get the value of the icon-set
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the icon-set
attribute.
Parameters Type: StringDescription: icon-set to use in the gridExample Input Values "fa"
"fontawesome"
"font-awesome"
"custom"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Methods will adjust the current grid layout displaying (Layout Methods Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.setLayout('card');
Description Get the value of the layout
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the layout-controls
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the layout
attribute.
Parameters Type: StringDescription: Value to indicate the grid layout.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the layout-controls
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo 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
const zgRef = document.querySelector('zing-grid');
zgRef.setContentMenu();
zgRef.closeContextMenu();
Description Closes currently opened contextmenu.
Parameters Null Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Get the value of the columns-control
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Get the value of the context-menu
attribute.
Parameters Null Example Input Values Null Returns Type: String | BooleanDescription: Value of the attribute.Demo Description Get the value of the static-menu
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of attribute.Demo Description Sets the context-menu
attribute.
Parameters Type: Boolean | StringDescription: Boolean value to indicate add or remove, or string value to indicate reference to id of context-menu.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the static-menu
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo 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
const zgRef = document.querySelector('zing-grid');
zgRef.setPager();
zgRef.setPageSize(10);
zgRef.lastPage();
Description Navigate to first page in the grid.
Parameters Null Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Gets the current page.
Parameters Null Example Input Values Null Returns Type: NumberDescription: Page index.Demo Description Gets the current page-size
.
Parameters Null Example Input Values Null Returns Type: NumberDescription: Page size.Demo Description Get the value of the page-size-card
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the page-size-row
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the pager
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Navigates to the last page in the grid.
Parameters Null Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Navigates to the next page in the grid.
Parameters Null Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Navigates to the previous page in the grid.
Parameters Null Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Changes the current page index to be the specified value.
Parameters Type: NumberDescription: New page index.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Changes the current page size to be the specified value.
Parameters Type: NumberDescription: New page size.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Changes the current page size to be the specified value in card mode.
Parameters Type: NumberDescription: New card page size.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the page size options for the pager drop down.
Parameters Type: StringDescription: Comma separated list of numerical page sizes.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Changes the current page size to be the specified value in row mode.
Parameters Type: NumberDescription: New row page size.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the pager
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo 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
const zgRef = document.querySelector('zing-grid');
zgRef.insertRow();
Description Get the value of the row-class
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the zebra
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the row-class
attribute.
Parameters Type: StringDescription: class name or function nameExample Input Values "userClassName"
"functionName"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the zebra
attribute.
Parameters Type: StringDescription: class name or function nameExample Input Values "userClassName1 userClassName2"
"functionName"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Methods to toggle search (Search Methods Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.setSearch();
Description Get the value of the search
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Searches the grid with the search term indicated.
Parameters Type: StringDescription: Search term.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the search
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Methods that allow users to make a selection on the grid by outlining the selected cell(s). (Selector Methods Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.setSelector();
zgRef.getSelector();
Description Get the value of the selector
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of attribute.Demo Description Selects one or more cells
Parameters Type: StringDescription: Row of cell to selectType: StringDescription: Column of cell to selectType: StringDescription: Optional end cell row for multi-cell selectionType: StringDescription: Optional end cell column for multi-cell selectionExample Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the selector
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Methods enable sorting a column, which is triggered by clicking on column headers (Sorter Methods Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.setSorter();
zgRef.getSorter();
Description Get the value of the sort
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the sorter
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the sort
attribute.
Parameters Type: BooleanDescription: Boolean value to indicate add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the sorter
attribute.
Parameters Type: Boolean | StringDescription: string value to indicate reference to custom sorter function.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Methods allow changing of the grid data reference or source (Source Methods Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.setSource('New Source: https://www.zinggrid.com');
Description Get the value of the source
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the source
attribute.
Parameters Type: StringDescription: source of the data in the gridExample Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo 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
const zgRef = document.querySelector('zing-grid');
zgRef.setTheme('ios');
zgRef.getTheme();
Description Get the value of the theme
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of attribute.Demo Description Sets the theme
attribute.
Parameters Type: StringDescription: Value to indicate which theme to set.Example Input Values default
android
ios
dark
customTheme
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo 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
const zgRef = document.querySelector('zing-grid');
zgRef.getViewport();
Description Get the value of the viewport
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the viewport-pause
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Get the value of the viewport-stop
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Get the value of the viewport-types
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the viewport-pause
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the viewport-stop
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo