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

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

getCompact()

Description

Get the value of the compact attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: String | Boolean
    Description: Value of the attribute.

Demo

getDir()

Description

Get the dir setting for the Grid

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of dir.

Demo

getDragAction()

Description

Get the value of the drag-action attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of the attribute.

Demo

getGridlines()

Description

Get the value of the gridlines attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of the attribute.

Demo

getHeight()

Description

Get the value of the height attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of the attribute.

Demo

getLang()

Description

Get the language used on the grid.

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of the attribute.

Demo

getWidth()

Description

Get the value of the width attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of the attribute.

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

setDragAction()

Description

Sets the 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

setDraggable()

Description

Sets the draggable attribute.

Parameters

  • Type: Boolean | Enum
    Description: Boolean value to indicate add or remove, or string value to indicate the draggable type.

Example Input Values

  • true
  • false
  • "rows"
  • "columns"
  • "both"

Returns

  • Type: 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

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

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

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

Get 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

Get the value of the col-class attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of the attribute.

Demo

getHeaderAutoFormat()

Description

Get the value of the header-auto-format attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: Boolean
    Description: Value of the attribute.

Demo

hideColumn()

Description

Hide 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

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

showColumn()

Description

Set 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

Toggle 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

Fetch the internal property referencing the dataset for the grid.

Parameters

  • Type: Object
    Description: 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

Get the value of the src attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of attribute.

Demo

getTemplateEndDelimiter()

Description

Get 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

Get 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

Set or update 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

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

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

getEditor()

Description

Get the value of the editor attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of the attribute.

Demo

getEditorControls()

Description

Get the value of the editor-controls attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of the attribute.

Demo

getRowSelector()

Description

Get the value of the row-selector attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: Boolean
    Description: Value of the attribute.

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

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

Get 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

Get 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

Get 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

Get 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

Get the value of the layout attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of the attribute.

Demo

getLayoutControls()

Description

Get 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: String
    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

Get the value of the columns-control attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: Boolean
    Description: Value of the attribute.

Demo

getContextMenu()

Description

Get 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

Get 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

Navigate 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

Get 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

Get 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

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

getRowClass()

Description

Get the value of the row-class attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of the attribute.

Demo

getZebra()

Description

Get 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

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

Get 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

Get 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

Get the value of the sort attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of the attribute.

Demo

getSorter()

Description

Get 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

Get 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

Get 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

Get the value of the viewport attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of the attribute.

Demo

getViewportPause()

Description

Get the value of the viewport-pause attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: Boolean
    Description: Value of the attribute.

Demo

getViewportStop()

Description

Get the value of the viewport-stop attribute.

Parameters

Null

Example Input Values

Null

Returns

  • Type: Boolean
    Description: Value of the attribute.

Demo

getViewportTypes()

Description

Get 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

On This Page