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

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

getRowHeight()

Description

Gets the value of the row-height attribute

Parameters

Null

Example Input Values

Null

Returns

  • Type: String
    Description: Value of the attribute

Demo

getRowHeightScope()

Description

Gets the value of the row-height-scope attribute

Parameters

Null

Example Input Values

Null

Returns

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

setRowHeight()

Description

Sets the row-height attribute

Parameters

  • Type: String
    Description: CSS height to set for the row height

Example Input Values

Null

Returns

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

Demo

setRowHeightScope()

Description

Sets the row-height-scope attribute

Parameters

  • Type: Enum
    Description: Set to 'data', 'headers', or 'all'

Example Input Values

Null

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

filterMenuColumn()

Description

Advanced filtering on the column specified by column index. Note: filter attribute must be present for this method to work with the filter menu enabled.

Parameters

  • Type: String
    Description: Field Index of column.
  • Type: Object
    Description: Advanced Filter configuration.
  • Type: Array.
    Description: Array of conditional objects to filter on
  • Type: String
    Description: the key based string for the condition to apply the filter, ie contains, startsWith, greaterThan
  • Type: String
    Description: The first value to apply towards the condition
  • Type: String
    Description: The second value to apply towards the condition
  • Type: String
    Description: 'and' or 'or' indicating how to filter multiple conditionals. Default is 'and'
  • Type: Boolean
    Description: Boolean indicating if the matching should be case sensitive. Default is false
  • Type: Array.
    Description: Array of items to select in the filter menu selectbox

    • Example Input Values

    Null

    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

    hideColumnType()

    Description

    Hides all columns with the given column type

    Parameters

    • Type: String
      Description: Type of the columns to hide

    Example Input Values

    • row-details

    Returns

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

    Demo

    resetFilter()

    Description

    Resets the current filter. Resets either the specified column or all the columns

    Parameters

    • Type: String
      Description: Index of column.

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

  • 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

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

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

On This Page