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.

Test out any of the methods below in our Methods Sandbox.

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.

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()
});

calculate()

Description

Calculates aggregate values

Parameters

Type: String
Description: The method to calculate. Options are 'sum', 'avg', 'min', 'max', and 'count'
Type: Object
Description: The options to be used in calculating the value. Currently fieldIndex is only option.
Type: Array
Description: The data to calculate the value on. If this is not set, it uses the grids full dataset

Example Input Values

Null

Returns

Type: String
Description: The calculated value or empty string if the parameters don't make sense

Demo

clearState()

Description

Clears the grid state

Parameters

Null

Example Input Values

Null

Returns

Null

Demo

executeOnLoad()

Description

Executes callback function when grid completes load. If grid is already loaded, it will execute immediately.

Parameters

Type: function
Description: Callback function to execute

Example Input Values

function() { //do something }

Returns

Type: Undefined
Description: N/A

Demo

formatDate()

Description

Formats a Date

Parameters

Type: String | Date
Description: The Date to format
Type: String
Description: The tokenized format to format the date

Example Input Values

Null

Returns

Type: String
Description: The formatted date

Demo

fromNow()

Description

Formats a Date in from now format

Parameters

Type: Date
Description: The Date to format
Type: Boolean
Description: Indicates if we should include 'ago/to' to indicate past/future

Example Input Values

Null

Returns

Type: String
Description: The formatted date

Demo

getAggregate()

Description

Get the value of the aggregate attribute. Does not return any user defined aggregate columns.

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the aggregate attribute.

Demo

getBatchEdit()

Description

Gets the value of the batch-edit attribute

Parameters

Null

Example Input Values

Null

Returns

Type: Boolean
Description: Value of the attribute

Demo

getBatchEditStatus()

Description

Gets the value of the batch-edit-status attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getColumnDrag()

Description

Gets the value of the column-drag attribute

Parameters

Null

Example Input Values

Null

Returns

Type: Boolean
Description: Value of the attribute

Demo

getColumnDragAction()

Description

Gets the value of the column-drag-action attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getCompact()

Description

Gets the value of the compact attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String | Boolean
Description: Value of the attribute

Demo

getDir()

Description

Gets the dir setting for the grid

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of dir

Demo

getGridlines()

Description

Gets the value of the gridlines attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getGroupBy()

Description

Gets the indexes of the current row groupings. Returns false if none

Parameters

Null

Example Input Values

Null

Returns

Type: String | Boolean
Description: Index value of the row-group or false if none.

Demo

getHeight()

Description

Gets the value of the height attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getLang()

Description

Gets the language used on the grid

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getPreserveStateId()

Description

Gets the value of the preserve-state-id attribute

Parameters

Null

Example Input Values

Null

Returns

Type: ZingGrid
Description: Value of the attribute

Demo

getPreserveStateLoad()

Description

Gets the value of the preserve-state-load attribute

Parameters

Null

Example Input Values

Null

Returns

Type: ZingGrid
Description: Value of the attribute

Demo

getPreserveStateOptions()

Description

Gets the value of the preserve-state-options attribute

Parameters

Null

Example Input Values

Null

Returns

Type: ZingGrid
Description: Value of the attribute

Demo

getPreserveStateSave()

Description

Gets the value of the preserve-state-save attribute

Parameters

Null

Example Input Values

Null

Returns

Type: ZingGrid
Description: Value of the attribute

Demo

getWidth()

Description

Gets the value of the width attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

setAggregate()

Description

Sets the aggregate attribute

Parameters

Type: String
Description: Value to set aggregate to

Example Input Values

"sum"
"avg"
"max"
"min"
"count"
"tokenized string"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setBatchEdit()

Description

Sets the value of the batch-edit attribute

Parameters

Type: Boolean
Description: Value of batch-edit

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setBatchEditStatus()

Description

Sets the value of the batch-edit-status attribute

Parameters

Type: String
Description: Value of the batch-edit-status

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setBuildCode()

Description

Sets the build code and removes watermarks if it is valid. If the build code is not set on page load, it is possible to set it through this API Method.

Parameters

Type: Array
Description: The buildcode array

Example Input Values

['BUILD_CODE']

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setColumnDrag()

Description

Sets the column-drag attribute

Parameters

Type: Boolean
Description: Boolean value to indicate add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setColumnDragAction()

Description

Sets the column-drag-action attribute

Parameters

Type: Enum
Description: Type of drag to enable

Example Input Values

"reorder"
"remove"
"both"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setCompact()

Description

Sets the compact attribute

Parameters

Type: Boolean
Description: Value to add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setDir()

Description

Sets the dir attribute

Parameters

Type: Enum
Description: Type of dir

Example Input Values

"ltr"
"rtl"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setGridlines()

Description

Sets the gridlines attribute

Parameters

Type: Enum
Description: Type of gridlines to set on the grid

Example Input Values

"both"
"horz"
"horizontal"
"vert"
"vertical"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setGroupBy()

Description

Sets the group-by attribute

Parameters

Type: String
Description: Index to set the group-by

Example Input Values

country

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setHeight()

Description

Sets the height attribute

Parameters

Type: Number
Description: Value setting the height of the grid

Example Input Values

500

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setLang()

Description

Sets the lang attribute

Parameters

Type: String
Description: Language to set on the grid

Example Input Values

"en"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setLicense()

Description

Sets the license and removes watermarks if it is valid. If the license is not set on page load, it is possible to set it through this API Method

Parameters

Type: Array
Description: The license array

Example Input Values

['LICENSE_KEY']

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setPreserveStateId()

Description

Sets the preserve-state-id attribute

Parameters

Type: String
Description: Value setting the id

Example Input Values

'myzinggridstate'

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setPreserveStateLoad()

Description

Sets the preserve-state-load attribute as a reference of the user defined method to call on state load

Parameters

Type: String
Description: Value setting the function

Example Input Values

'loadState'

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setPreserveStateOptions()

Description

Sets the preserve-state-options attribute as a comma separated string of the options

Parameters

Type: String
Description: Value setting the options

Example Input Values

'search, filter'

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setPreserveStateSave()

Description

Sets the preserve-state-save attribute as a reference of the user defined method to call on state save

Parameters

Type: String
Description: Value setting the function

Example Input Values

'saveState'

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setRecordCount()

Description

Sets the record-count attribute

Parameters

Type: Number
Description: Value setting the count

Example Input Values

100

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setState()

Description

Sets the grid state with the options passed in

Parameters

Type: String
Description: JSON string or object setting the state

Example Input Values

'{"search": "Tom", "page": 2}'

Returns

Null

Demo

setStateField()

Description

Sets the grid state for the given field

Parameters

Type: String
Description: Name of the state to set
Type: String
Description: String, JSON string or object setting the state

Example Input Values

Null

Returns

Null

Demo

setWidth()

Description

Sets the width attribute

Parameters

Type: Number
Description: Value setting the width of the grid

Example Input Values

500

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

updateSize()

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

Type: Boolean
Description: Display the loading screen while updating the grid. False by default
Type: Number
Description: The time to delay the action. This should be > the time it takes to do the CSS transition. Value in seconds

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Caption Methods

When enabled, <zg-caption> acts as the title of the grid. Its methods get/set the caption text.

Example Usage

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

getCaption()

Description

Gets the value of the caption attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of attribute

Demo

setCaption()

Description

Set the caption text

Parameters

Type: String
Description: Text to set the caption to. If no string is passed, it will remove the caption.

Example Input Values

Hello World

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Card Methods

<zg-card> methods allow customizing default card templates.

Example Usage

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

setCardTemplate()

Description

Sets the id to reference an external template to be used as <zg-card>

Parameters

Type: String
Description: Value of id to use the card template.

Example Input Values

templateId

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Column Methods

<zg-column> methods manipulate columns by sorting, filtering, or hiding targeted columns.

Example Usage

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

column()

Description

Fetches the targeted column.

Parameters

Type: String
Description: Field index of column to fetch.

Example Input Values

Null

Returns

Type: Object
Description: Column object.

Demo

filterColumn()

Description

Filters the column specified by column index. Note: filter attribute must be present for this method to work.

Parameters

Type: String
Description: Index of column.
Type: String
Description: Filter string.

Example Input Values

('firstName', 'John')

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

getColClass()

Description

Gets the value of the col-class attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getFrozenColumnsLeft()

Description

Gets the value of the frozen-columns-left attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getFrozenColumnsRight()

Description

Gets the value of the frozen-columns-right attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getHeaderAutoFormat()

Description

Gets the value of the header-auto-format attribute

Parameters

Null

Example Input Values

Null

Returns

Type: Boolean
Description: Value of the attribute

Demo

getNestedDataSeparator()

Description

Gets the value of the nested-data-separator attribute

Parameters

Null

Example Input Values

Null

Returns

Type: Boolean
Description: Value of the attribute

Demo

hideColumn()

Description

Hides a column based on index

Parameters

Type: String
Description: Index of column to hide

Example Input Values

firstName

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setColClass()

Description

Sets the col-class attribute

Parameters

Type: String
Description: Class name or function name

Example Input Values

"userClassName"
"functionName"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setColumns()

Description

Sets the columns property

Parameters

Type: Array
Description: Array of column objects

Example Input Values

Array

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setColumnsControl()

Description

Sets the columns-control attribute

Parameters

Type: Boolean
Description: Value to add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setFrozenColumnsLeft()

Description

Sets the frozen-columns-left attribute

Parameters

Type: Number
Description: The number of columns to freeze to the left

Example Input Values

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setFrozenColumnsRight()

Description

Sets the frozen-columns-right attribute

Parameters

Type: Number
Description: The number of columns to freeze to the right

Example Input Values

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setHeaderAutoFormat()

Description

Sets the header-auto-format attribute

Parameters

Type: Boolean
Description: Value to add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setNestedDataSeparator()

Description

Sets the nested-data-separator attribute

Parameters

Type: String
Description: The separator value

Example Input Values

"."
"/"
"disabled"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

showColumn()

Description

Sets column to be visible

Parameters

Type: String
Description: Index of column to show

Example Input Values

firstName

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

sortColumn()

Description

Sorts the given column with the given sort direction

Parameters

Type: String
Description: Index of column to sort
Type: String
Description: Sort Direction: asc, desc, or none

Example Input Values

(firstName, asc)
(firstName, desc)
(firstName)

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

toggleColumn()

Description

Toggles the visibility of a column by index

Parameters

Type: String
Description: Index of column to toggle
Type: Boolean
Description: Visibility of column

Example Input Values

(firstName, true)
(firstName, false)

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Data Methods

<zg-data> methods allow changing or grabbing data in the grid.

Example Usage

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

getData()

Description

Fetches the internal property referencing the dataset for the grid

Parameters

Type: Object
Description: Optional, options for the data retrieval. Options are: csv (set true to return csv string), headers (set true to return headers - only applies to csv or JSON array of arrays), cols (set to 'all' or 'visible' to return all or only visible columns), rows (set to 'all' or 'visible' to return all or only visible rows)

Example Input Values

{ csv: true, headers: true, col: "all or visible", rows: "all or visible" }

Returns

Type: Array | Object
Description: The dataset.

Demo

getSrc()

Description

Gets the value of the src attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of attribute

Demo

getTemplateEndDelimiter()

Description

Gets the value of the template-end-delimiter attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getTemplateStartDelimiter()

Description

Gets the value of the template-start-delimiter attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

insertRow()

Description

Inserts a new row into the grid

Parameters

Type: Object
Description: Data to insert into new row
Type: String
Description: If the id is already set on the new record, pass it in here
Type: Boolean
Description: If you only want to do a local insert, set `noDataSource` to "true"

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

refresh()

Description

Refreshes all cells. Note: if using static data, original cell value will be restored.

Parameters

Null

Example Input Values

N/A

Returns

Type: Undefined
Description: N/A

Demo

refreshGrid()

Description

Refreshes entire grid. Useful for language change.

Parameters

Null

Example Input Values

N/A

Returns

Type: Undefined
Description: N/A

Demo

removeRecord()

Description

Removes a record from the grid

Parameters

Type: String
Description: ID of the record to remove
Type: Boolean
Description: If you only want to remove from the grid and not the external datasource, set `noDataSource` to "true"

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

removeRow()

Description

Removes a row from the grid

Parameters

Type: String
Description: Row index (0 based) of the record to remove
Type: Boolean
Description: If you only want to remove from the grid and not the external datasource, set `noDataSource` to "true"

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setData()

Description

Sets or updates the dataset for the grid

Parameters

Type: Array | Object
Description: JSON data

Example Input Values

[1, 2, 3]
[{firstName:"John", lastName:"Doe"}]

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setSrc()

Description

Sets the src attribute

Parameters

Type: String
Description: Value to indicate a path to a remote data source

Example Input Values

https://cdn.zinggrid.com/datasets/users.json

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setTemplateEndDelimiter()

Description

Sets the template-end-delimiter attribute

Parameters

Type: String
Description: Value to indicate regex expression for closing data binding

Example Input Values

"}}"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setTemplateStartDelimiter()

Description

Sets the template-start-delimiter attribute

Parameters

Type: String
Description: Value to indicate regex expression for opening data binding

Example Input Values

"{{"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

updateCellByID()

Description

Updates a cell in the grid

Parameters

Type: Number
Description: ID of the record to update
Type: Number
Description: Field index of the cell to update
Type: *
Description: New Value
Type: Boolean
Description: If you only want to update the grid and not the external datasource, set `noDataSource` to "true"

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

updateCellByPosition()

Description

Updates a cell in the grid

Parameters

Type: Number
Description: Row index (0 based) of the cell to update
Type: Number
Description: Column index (0 based) of the cell to update
Type: *
Description: New Value
Type: Boolean
Description: If you only want to update the grid and not the external datasource, set `noDataSource` to "true"

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

updateRecord()

Description

Updates a record in the grid

Parameters

Type: String
Description: ID of the record to update
Type: Object
Description: Data to update
Type: Boolean
Description: If you only want to update the grid and not the external datasource, set `noDataSource` to "true"
Type: Boolean
Description: If you only do not want the display to do an refresh after updating the record, set `noRefresh` to "true". NOTE: Any data change will NOT be reflected in the grid if this is set to "true"

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

updateRow()

Description

Updates a row in the grid

Parameters

Type: String
Description: Row index (0 based) of the record to update
Type: Object
Description: Data to update
Type: Boolean
Description: If you only want to update the grid and not the external datasource, set `noDataSource` to "true"
Type: Boolean
Description: If you only do not want the display to do an refresh after updating the record, set `noRefresh` to "true". NOTE: Any data change will NOT be reflected in the grid if this is set to "true"

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Dialog Methods

<zg-dialog> methods allow customizing default dialog box text.

Example Usage

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

closeDialog()

Description

Closes currently opened dialogs

Parameters

Null

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

customizeDialog()

Description

Customizes the user's dialog

Parameters

Type: String
Description: 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: Object
Description: Options for the data retrieval. Options are: cancel (text for the cancel button), confirm (text for the confirm button), title: (title to display on the dialog)

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

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.

Example Usage

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

getConfirmations()

Description

Gets the value of the confirmations attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getCreator()

Description

Gets the value of the creator attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getEditor()

Description

Gets the value of the editor attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getEditorControls()

Description

Gets the value of the editor-controls attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getRecordDuplicate()

Description

Gets the value of the record-duplicate attribute

Parameters

Null

Example Input Values

Null

Returns

Type: Boolean
Description: Value of the attribute

Demo

getRowSelector()

Description

Gets the value of the row-selector attribute

Parameters

Null

Example Input Values

Null

Returns

Type: Boolean
Description: Value of the attribute

Demo

openRowEditor()

Description

Opens specified row in edit mode if editing is allowed

Parameters

Null

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setConfirmations()

Description

Sets the confirmations attribute

Parameters

Type: String
Description: string value to indicate what confirmations to enable

Example Input Values

"batch-edit"
"batch-edit-discard"
"delete"
"disabled"
"all"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setCreator()

Description

Sets the creator attribute

Parameters

Type: String
Description: Value of the creator mode

Example Input Values

inline
modal

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setEditor()

Description

Sets the editor attribute

Parameters

Type: Boolean | String
Description: Boolean value to indicate add or remove, or string value to indicate the editor type

Example Input Values

true
false
inline
modal

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setEditorControls()

Description

Sets the editor-controls attribute

Parameters

Type: Boolean | String
Description: 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: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setRecordDuplicate()

Description

Sets the record-duplicate attribute

Parameters

Type: Boolean
Description: Value to add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setRowSelector()

Description

Sets the row-selector attribute

Parameters

Type: Boolean
Description: Value to add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Filter Methods

<zg-filter> methods can toggle the filter or get its attribute value.

Example Usage

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

getFilter()

Description

Gets the value of the filter attribute

Parameters

Null

Example Input Values

Null

Returns

Type: Boolean
Description: Value of the attribute

Demo

setFilter()

Description

Sets the filter attribute

Parameters

Type: Boolean
Description: Value to add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Foot Methods

<zg-foot> methods affect the table footer.

Example Usage

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

getFootClass()

Description

Gets the value of the foot-class attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

setFootClass()

Description

Sets the foot-class attribute

Parameters

Type: String
Description: class name or function name

Example Input Values

"userClassName"
"functionName"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Head Methods

<zg-head> methods affect the table headers.

Example Usage

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

getHeadClass()

Description

Gets the value of the head-class attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

setHeadClass()

Description

Sets the head-class attribute

Parameters

Type: String
Description: Class name or function name

Example Input Values

"userClassName"
"functionName"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Icon Methods

<zg-icon> methods allow adding and manipulating user defined icon sets.

Example Usage

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

getIconSet()

Description

Gets the value of the icon-set attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

setIconSet()

Description

Sets the icon-set attribute

Parameters

Type: String
Description: Icon set to use in the grid

Example Input Values

"fa"
"fontawesome"
"font-awesome"
"custom"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Layout Methods

<zg-layout> methods will adjust the current grid layout display.

Example Usage

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

getLayout()

Description

Gets the value of the layout attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getLayoutControls()

Description

Gets the value of the layout-controls attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

setLayout()

Description

Sets the layout attribute

Parameters

Type: Enum
Description: Value to indicate the grid layout

Example Input Values

"row"
"card"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setLayoutControls()

Description

Sets the layout-controls attribute

Parameters

Type: Boolean
Description: Value to add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Menu Methods

There are two ways to open the context menu. The first way is by using the static menu which is located in the control bar at the top of the grid (when enabled). The second way is by right-clicking a cell to open the context menu.

Example Usage

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

closeContextMenu()

Description

Closes currently opened contextmenu.

Parameters

Null

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

getColumnsControl()

Description

Gets the value of the columns-control attribute

Parameters

Null

Example Input Values

Null

Returns

Type: Boolean
Description: Value of the attribute

Demo

getContextMenu()

Description

Gets the value of the context-menu attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String | Boolean
Description: Value of the attribute

Demo

getStaticMenu()

Description

Gets the value of the static-menu attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of attribute

Demo

setContextMenu()

Description

Sets the context-menu attribute.

Parameters

Type: Boolean | String
Description: Boolean value to indicate add or remove, or string value to indicate reference to id of context-menu.

Example Input Values

true
false
contextMenuId

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setStaticMenu()

Description

Sets the static-menu attribute

Parameters

Type: Boolean
Description: Value to add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Pager Methods

When enabled, pager controls are located at the bottom of the grid and provide a way to navigate through the grid. <zg-pager> methods allow you to change pages and set page size or options.

Example Usage

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

firstPage()

Description

Navigates to first page in the grid

Parameters

Null

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

getPageIndex()

Description

Gets the current page. Does not apply to cursor paging.

Parameters

Null

Example Input Values

Null

Returns

Type: Number
Description: Page index

Demo

getPageSize()

Description

Gets the current page-size

Parameters

Null

Example Input Values

Null

Returns

Type: Number
Description: Page size

Demo

getPageSizeCard()

Description

Gets the value of the page-size-card attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getPageSizeRow()

Description

Gets the value of the page-size-row attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getPager()

Description

Gets the value of the pager attribute

Parameters

Null

Example Input Values

Null

Returns

Type: Boolean
Description: Value of the attribute

Demo

lastPage()

Description

Navigates to the last page in the grid

Parameters

Null

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

nextPage()

Description

Navigates to the next page in the grid

Parameters

Null

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

prevPage()

Description

Navigates to the previous page in the grid

Parameters

Null

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setPageIndex()

Description

Changes the current page index to be the specified value

Parameters

Type: Number
Description: New page index

Example Input Values

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setPageSize()

Description

Changes the current page size to be the specified value

Parameters

Type: Number
Description: New page size

Example Input Values

10

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setPageSizeCard()

Description

Changes the current page size to be the specified value in card mode

Parameters

Type: Number
Description: New card page size

Example Input Values

10

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setPageSizeOptions()

Description

Sets the page size options for the pager drop down

Parameters

Type: String
Description: Comma separated list of numerical page sizes

Example Input Values

'5,25,100'

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setPageSizeRow()

Description

Changes the current page size to be the specified value in row mode

Parameters

Type: Number
Description: New row page size

Example Input Values

10

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setPager()

Description

Sets the pager attribute

Parameters

Type: Boolean
Description: Value to add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Row Methods

<zg-row> methods allow you to add and edit rows in the grid.

Example Usage

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

getFrozenRowClass()

Description

Gets the value of the frozen-row-class attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getFrozenRowsBottom()

Description

Gets the value of the frozen-rows-bottom attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getFrozenRowsTop()

Description

Gets the value of the frozen-rows-top attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getRowClass()

Description

Gets the value of the row-class attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getZebra()

Description

Gets the value of the zebra attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

row()

Description

Fetches the targeted row.

Parameters

Type: Number
Description: The index of the row to fetch.

Example Input Values

(3)

Returns

Type: Object
Description: Row object.

Demo

setFrozenRowClass()

Description

Sets the frozen-row-class attribute

Parameters

Type: String
Description: Class name or function name

Example Input Values

"userClassName"
"functionName"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setFrozenRowsBottom()

Description

Sets the frozen-rows-bottom attribute

Parameters

Type: Number
Description: The number of rows to freeze to the bottom

Example Input Values

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setFrozenRowsTop()

Description

Sets the frozen-rows-top attribute

Parameters

Type: Number
Description: The number of rows to freeze to the top

Example Input Values

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setRowClass()

Description

Sets the row-class attribute

Parameters

Type: String
Description: Class name or function name

Example Input Values

"userClassName"
"functionName"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setZebra()

Description

Sets the zebra attribute

Parameters

Type: String
Description: Class name or function name

Example Input Values

"userClassName1 userClassName2"
"functionName"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Search Methods

<zg-search> methods allow you to toggle searching capabilities.

Example Usage

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

getSearch()

Description

Gets the value of the search attribute

Parameters

Null

Example Input Values

Null

Returns

Type: Boolean
Description: Value of the attribute

Demo

searchGrid()

Description

Searches the grid with the search term indicated

Parameters

Type: String
Description: Search term

Example Input Values

John Doe

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setSearch()

Description

Sets the search attribute

Parameters

Type: Boolean
Description: Value to add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Selector Methods

<zg-selector> methods allow users to make a selection on the grid by outlining the selected cell(s).

Example Usage

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

deselect()

Description

Deselects all cells

Parameters

Null

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

deselectRow()

Description

Deselects row at given 0 based index.

Parameters

Type: String
Description: Row to deselect

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

deselectRows()

Description

Deselects any row selected by the row selector column

Parameters

Null

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

getSelectedRows()

Description

Returns an array of selected rows

Parameters

Null

Example Input Values

Null

Returns

Type: Array
Description: Selected Data

Demo

getSelector()

Description

Gets the value of the selector attribute

Parameters

Null

Example Input Values

Null

Returns

Type: Boolean
Description: Value of attribute

Demo

select()

Description

Selects one or more cells

Parameters

Type: String
Description: Row of cell to select
Type: String
Description: Column of cell to select
Type: String
Description: Optional end cell row for multi-cell selection
Type: String
Description: Optional end cell column for multi-cell selection

Example Input Values

(1, 1)

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

selectAll()

Description

Selects all cells

Parameters

Null

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

selectRow()

Description

Selects row at given 0 based index. Will not select if there is no selector column or index is off page.

Parameters

Type: String
Description: Row to select

Example Input Values

Null

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setSelector()

Description

Sets the selector attribute

Parameters

Type: Boolean
Description: Value to add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Sorter Methods

<zg-sort> methods enable sorting a column, which is triggered by clicking on column headers.

Example Usage

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

getSort()

Description

Gets the value of the sort attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getSortedColumn()

Description

Gets the current sorted column as well as the sort direction

Parameters

Null

Example Input Values

Null

Returns

Type: Object
Description: Object containing: fieldIndex - the currently sorted column, order - the sort direction

Demo

getSorter()

Description

Gets the value of the sorter attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

setSort()

Description

Sets the sort attribute

Parameters

Type: Boolean
Description: Boolean value to indicate add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setSorter()

Description

Sets the sorter attribute

Parameters

Type: Boolean | String
Description: String value to indicate reference to custom sorter function

Example Input Values

fncName

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Source Methods

<zg-source> methods allow changing of the grid's data reference or source.

Example Usage

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

getSource()

Description

Gets the value of the source attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute.

Demo

setSource()

Description

Sets the source attribute. Not to be confused with src attribute, the source attribute is for citation.

Parameters

Type: String
Description: Source of the data in the grid

Example Input Values

"Source: Wikipedia"

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Theme Methods

Theme methods allow 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();

getTheme()

Description

Gets the value of the theme attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of attribute

Demo

setTheme()

Description

Sets the theme attribute

Parameters

Type: String
Description: Value to indicate which theme to set

Example Input Values

default
android
ios
dark
customTheme

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

Viewport Methods

Viewport methods allow adjusting our viewport manager. The viewport manager is used to read size mutations on the window and grid.

Example Usage

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

getViewport()

Description

Gets the value of the viewport attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

getViewportPause()

Description

Gets the value of the viewport-pause attribute

Parameters

Null

Example Input Values

Null

Returns

Type: Boolean
Description: Value of the attribute

Demo

getViewportStop()

Description

Gets the value of the viewport-stop attribute

Parameters

Null

Example Input Values

Null

Returns

Type: Boolean
Description: Value of the attribute

Demo

getViewportTypes()

Description

Gets the value of the viewport-types attribute

Parameters

Null

Example Input Values

Null

Returns

Type: String
Description: Value of the attribute

Demo

setViewportPause()

Description

Sets the viewport-pause attribute

Parameters

Type: Boolean
Description: Value to add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

setViewportStop()

Description

Sets the viewport-stop attribute

Parameters

Type: Boolean
Description: Value to add or remove

Example Input Values

true
false

Returns

Type: ZingGrid
Description: Returns the component so that you can chain methods together

Demo

< api: theming system

[api: Method Reference]

api: Usage Guide >