Docs

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

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

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

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

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

Null

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: Array
    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

  • 1

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

  • 1

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: 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 | 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"

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"

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: The 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();

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

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

  • 2

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

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

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

  • 1

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

  • 1

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

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

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

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: Method Reference]

On This Page