API Methods ZingGrid provides a rich API for controlling grid interactions – from re-rendering to adjusting user interactions (like paging) through JavaScript. As an object, ZingGrid comes with its own set of methods that get/set properties and manipulate its contents.
ZingGrid refers to the grid tag (<zing-grid>
) itself. Grid-specific methods include getting the current grid dimensions, refreshing the grid, and a 'ready' callback function.
For display purposes, the methods on this page are broken out by grid element, but all methods are called from the <zing-grid>
tag.
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.executeOnLoad(function() {
zgRef.getHeight()
});
Description Executes callback function when grid completes load. If grid is already loaded, it will execute immediately.
Parameters Type: functionDescription: Callback function to executeExample Input Values function() { //do something }
Returns Type: UndefinedDescription: N/ADemo Description Formats a Date
Parameters Type: String | DateDescription: the Date to formatType: StringDescription: the tokenized format to format the dateExample Input Values Null Returns Type: StringDescription: the formatted dateDemo Description Formats a Date in from now format
Parameters Type: DateDescription: the Date to formatType: BooleanDescription: Indicates if we should include 'ago/to' to indicate past/futureExample Input Values Null Returns Type: StringDescription: the formatted dateDemo Description Get the value of the compact
attribute.
Parameters Null Example Input Values Null Returns Type: String | BooleanDescription: Value of the attribute.Demo Description Get the dir setting for the Grid
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of dir.Demo Description Get the value of the drag-action
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the gridlines
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the height
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the language used on the grid.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the width
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the compact
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the dir
attribute.
Parameters Type: EnumDescription: Type of dirExample Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the drag-action
attribute.
Parameters Type: EnumDescription: Type of drag to enableExample Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the draggable
attribute.
Parameters Type: Boolean | EnumDescription: Boolean value to indicate add or remove, or string value to indicate the draggable type.Example Input Values true
false
"rows"
"columns"
"both"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the gridlines
attribute.
Parameters Type: EnumDescription: type of gridlines to set on the gridExample Input Values "both"
"horz"
"horizontal"
"vert"
"vertical"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the height
attribute.
Parameters Type: NumberDescription: Value setting the height of the grid.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the lang
attribute.
Parameters Type: StringDescription: Language to set on the gridExample Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the record-count
attribute.
Parameters Type: NumberDescription: Value setting the count.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the width
attribute.
Parameters Type: NumberDescription: Value setting the width of the grid.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Forces a resize event to be triggered and to partially repaint the grid. Useful when the container updates size without the window updating.
Parameters Null Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo 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();
Description Get the value of the caption
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of attribute.Demo Description Set the caption text.
Parameters Type: StringDescription: Text to set the caption to. If no string is passed it will remove the caption.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <zg-card>
methods allow customizing default card templates.
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.setCardTemplate('templateId');
Description Sets the id to reference an external template
to be used as zg-card
.
Parameters Type: StringDescription: Value of id to use the card template.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <zg-column>
methods manipulate columns by sorting, filtering, or hiding targeted columns.
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.hideColumn('password');
zgRef.sortColumn('lastName', 'asc');
Description Fetches the targeted column.
Parameters Type: ArrayDescription: Field index of column to fetch.Example Input Values Null Returns Type: ObjectDescription: Column object.Demo Description Filters the column specified by column index. Note: filter
attribute must be present for this method to work.
Parameters Type: StringDescription: Index of column.Type: StringDescription: Filter string.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Get the value of the col-class
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the header-auto-format
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Hide a column based on index.
Parameters Type: StringDescription: Index of column to hide.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the col-class
attribute.
Parameters Type: StringDescription: class name or function nameExample Input Values "userClassName"
"functionName"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the columns
property.
Parameters Type: ArrayDescription: Array of column objectsExample Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the columns-control
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the header-auto-format
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Set column to be visible.
Parameters Type: StringDescription: Index of column to show.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sorts the given column with the given sort direction.
Parameters Type: StringDescription: Index of column to sort.Type: StringDescription: Sort Direction: asc, desc, or none.Example Input Values (firstName, asc)
(firstName, desc)
(firstName)
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Toggle the visibility of a column by index.
Parameters Type: StringDescription: Index of column to toggle.Type: BooleanDescription: Visibility of column.Example Input Values (firstName, true)
(firstName, false)
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <zg-data>
methods allow changing or grabbing data in the grid.
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.setData('[1, 2, 3]');
zgRef.getSrc();
Description Fetch the internal property referencing the dataset for the grid.
Parameters Type: ObjectDescription: Options for the data retrieval. Options are:csv: Boolean indicating if it should be sent as a csv string. Default is false. headers: Boolean indicating if headers should be included. Default is false. Only applies to csv or JSON array of arrays as JSON objects have a key already. cols: String indicating if we should return all columns or only visible. 'all' or 'visible' are options. rows: String indicating if we should return all rows or only filtered/searched. 'all' or 'visible' are options. Example Input Values { csv: true, headers: true, col: "all or visible", rows: "all or visible" }
Returns Type: Array | ObjectDescription: The dataset.Demo Description Get the value of the src
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of attribute.Demo Description Get the value of the template-end-delimiter
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the template-start-delimiter
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Inserts a new row into the grid.
Parameters Type: ObjectDescription: Data to insert into new row.Type: StringDescription: If the id is already set on the new record, pass it in hereType: BooleanDescription: If you only want to do a local insert, set noDataSource to trueExample Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Refreshes all cells. Note: if using static data, original cell value will be restored.
Parameters Null Example Input Values Returns Type: UndefinedDescription: N/ADemo Description Refreshes entire grid. Useful for language change
Parameters Null Example Input Values Returns Type: UndefinedDescription: N/ADemo Description Removes a record from the grid.
Parameters Type: StringDescription: ID of the record to removeType: BooleanDescription: If you only want to remove from the grid and not the external datasource, set noDataSource to trueExample Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Removes a row from the grid.
Parameters Type: StringDescription: Row index (0 based) of the record to removeType: BooleanDescription: If you only want to remove from the grid and not the external datasource, set noDataSource to trueExample Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Set or update the dataset for the grid.
Parameters Type: Array | ObjectDescription: JSON data.Example Input Values [1, 2, 3]
[{firstName:"John", lastName:"Doe"}]
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the src
attribute.
Parameters Type: StringDescription: Value to indicate a path to a remote data source.Example Input Values https://cdn.zinggrid.com/datasets/users.json
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the template-end-delimiter
attribute.
Parameters Type: StringDescription: Value to indicate regex expression for closing data binding.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the template-start-delimiter
attribute.
Parameters Type: StringDescription: Value to indicate regex expression for opening data binding.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Updates a record in the grid.
Parameters Type: StringDescription: ID of the record to updateType: ObjectDescription: Data to updateType: BooleanDescription: If you only want to update the grid and not the external datasource, set noDataSource to trueExample Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Updates a row in the grid.
Parameters Type: StringDescription: Row index (0 based) of the record to updateType: ObjectDescription: Data to updateType: BooleanDescription: If you only want to update the grid and not the external datasource, set noDataSource to trueExample Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <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'
});
Description Customizes the user's dialog
Parameters Type: StringDescription: The type of dialog to customize. If you set as null, the config will be applied to all dialogs. Options are:record-create record-delete record-info record-update view-error view-info view-success view-warn zg-version Type: ObjectDescription: Options for the data retrieval. Options are:cancel: Text for the Cancel Button confirm: Text for the Confirm Button title: The Title to display on the Dialog Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <zg-editor>
enables users to make edits to the grid. Its methods can toggle the editor, set type, or grab the attribute value of the editor.
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.setEditor('row');
zgRef.getEditor();
Description Get the value of the editor
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the editor-controls
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the row-selector
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Sets the editor
attribute.
Parameters Type: Boolean | StringDescription: Boolean value to indicate add or remove, or string value to indicate the editor type.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the editor-controls
attribute.
Parameters Type: Boolean | StringDescription: Boolean value to indicate add or remove, or string value to indicate what editor controls to add.Example Input Values true
false
all
editor
remover
creator
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the row-selector
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <zg-filter>
methods can toggle the filter or get its attribute value.
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.setFilter();
zgRef.getFilter();
Description Get the value of the filter
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Sets the filter
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <zg-foot>
methods affect the table footer.
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.getFootClass();
Description Get the value of the foot-class
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the foot-class
attribute.
Parameters Type: StringDescription: class name or function nameExample Input Values "userClassName"
"functionName"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <zg-head>
methods affect the table headers.
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.getHeadClass();
Description Get the value of the head-class
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the head-class
attribute.
Parameters Type: StringDescription: class name or function nameExample Input Values "userClassName"
"functionName"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <zg-icon>
methods allow adding and manipulating user defined icon sets.
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.getIconSet();
Description Get the value of the icon-set
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the icon-set
attribute.
Parameters Type: StringDescription: icon-set to use in the gridExample Input Values "fa"
"fontawesome"
"font-awesome"
"custom"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <zg-layout>
methods will adjust the current grid layout display.
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.setLayout('card');
Description Get the value of the layout
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the layout-controls
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the layout
attribute.
Parameters Type: StringDescription: Value to indicate the grid layout.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the layout-controls
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo There are two ways to open the context menu. 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();
Description Closes currently opened contextmenu.
Parameters Null Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Get the value of the columns-control
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Get the value of the context-menu
attribute.
Parameters Null Example Input Values Null Returns Type: String | BooleanDescription: Value of the attribute.Demo Description Get the value of the static-menu
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of attribute.Demo Description Sets the context-menu
attribute.
Parameters Type: Boolean | StringDescription: Boolean value to indicate add or remove, or string value to indicate reference to id of context-menu.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the static-menu
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo 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();
Description Navigate to first page in the grid.
Parameters Null Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Gets the current page. Does not apply to cursor paging.
Parameters Null Example Input Values Null Returns Type: NumberDescription: Page index.Demo Description Gets the current page-size
.
Parameters Null Example Input Values Null Returns Type: NumberDescription: Page size.Demo Description Get the value of the page-size-card
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the page-size-row
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the pager
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Navigates to the last page in the grid.
Parameters Null Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Navigates to the next page in the grid.
Parameters Null Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Navigates to the previous page in the grid.
Parameters Null Example Input Values Null Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Changes the current page index to be the specified value.
Parameters Type: NumberDescription: New page index.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Changes the current page size to be the specified value.
Parameters Type: NumberDescription: New page size.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Changes the current page size to be the specified value in card mode.
Parameters Type: NumberDescription: New card page size.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the page size options for the pager drop down.
Parameters Type: StringDescription: Comma separated list of numerical page sizes.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Changes the current page size to be the specified value in row mode.
Parameters Type: NumberDescription: New row page size.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the pager
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <zg-row>
methods allow you to add and edit rows in the grid.
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.insertRow();
Description Get the value of the row-class
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the zebra
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Fetches the targeted row.
Parameters Type: NumberDescription: The index of the row to fetch.Example Input Values Returns Type: ObjectDescription: Row object.Demo Description Sets the row-class
attribute.
Parameters Type: StringDescription: class name or function nameExample Input Values "userClassName"
"functionName"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the zebra
attribute.
Parameters Type: StringDescription: class name or function nameExample Input Values "userClassName1 userClassName2"
"functionName"
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <zg-search>
methods allow you to toggle searching capabilities.
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.setSearch();
Description Get the value of the search
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Searches the grid with the search term indicated.
Parameters Type: StringDescription: Search term.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the search
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <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();
Description Returns an array of selected rows
Parameters Null Example Input Values Null Returns Type: ArrayDescription: Selected DataDemo Description Get the value of the selector
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of attribute.Demo Description Selects one or more cells
Parameters Type: StringDescription: Row of cell to selectType: StringDescription: Column of cell to selectType: StringDescription: Optional end cell row for multi-cell selectionType: StringDescription: Optional end cell column for multi-cell selectionExample Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the selector
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <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();
Description Get the value of the sort
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the sorter
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the sort
attribute.
Parameters Type: BooleanDescription: Boolean value to indicate add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the sorter
attribute.
Parameters Type: Boolean | StringDescription: string value to indicate reference to custom sorter function.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo <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');
Description Get the value of the source
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the source
attribute. Not to be confused with src
attribute, the source
attribute is for citation.
Parameters Type: StringDescription: source of the data in the gridExample Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo 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();
Description Get the value of the theme
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of attribute.Demo Description Sets the theme
attribute.
Parameters Type: StringDescription: Value to indicate which theme to set.Example Input Values default
android
ios
dark
customTheme
Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo 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();
Description Get the value of the viewport
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Get the value of the viewport-pause
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Get the value of the viewport-stop
attribute.
Parameters Null Example Input Values Null Returns Type: BooleanDescription: Value of the attribute.Demo Description Get the value of the viewport-types
attribute.
Parameters Null Example Input Values Null Returns Type: StringDescription: Value of the attribute.Demo Description Sets the viewport-pause
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo Description Sets the viewport-stop
attribute.
Parameters Type: BooleanDescription: Value to add or remove.Example Input Values Returns Type: ZingGridDescription: Returns the component so that you can chain methods together.Demo