--- title: "API Methods | Docs" description: "ZingGrid provides a rich API for controlling grid interactions – from re-rendering to adjusting user interactions (like paging) through JavaScript." url: https://www.zinggrid.com/docs/api/methods/reference --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/api/methods/reference.md mode: provenance representation: markdown origin_response_id: 40588af00a97499f6610e79640ec8839 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.603Z version_nonce: a6750c7b41e97279d276ed92f32e8ef1 generated_at_utc: 2026-10-22T21:06:09.510Z response_nonce: 6f22f1f04ec7afc22a82aeb4823a73c1 ``` # 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](https://www.zinggrid.com/docs/api/methods/methods-sandbox). ## ZingGrid Methods ZingGrid refers to the grid tag (``) 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 `` tag. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.executeOnLoad(function() { zgRef.getHeight() }); ``` ### calculate() Calculates aggregate values Supported versions: 1.x, 2.x. **Parameters** - `method` (String): The method to calculate. Options are 'sum', 'avg', 'min', 'max', and 'count' - `options` (Object): The options to be used in calculating the value. Currently fieldIndex is only option. - `data` (Array): The data to calculate the value on. If this is not set, it uses the grids full dataset **Returns** - String: The calculated value or empty string if the parameters don't make sense [Example code](https://app.zingsoft.com/demos/embed/6OT26JVM) ### clearState() Clears the grid state Supported versions: 1.x, 2.x. [Example code](https://app.zingsoft.com/demos/embed/PU60HJHR) ### executeOnLoad() Executes callback function when grid completes load. If grid is already loaded, it will execute immediately. Supported versions: 1.x, 2.x. **Parameters** - `callback` (function): Callback function to execute **Returns** - Undefined: N/A [Example code](https://app.zingsoft.com/demos/embed/HRRCVJZ3) ### formatDate() Formats a Date Supported versions: 1.x, 2.x. **Parameters** - `date` (String | Date): The Date to format - `format` (String): The tokenized format to format the date **Returns** - String: The formatted date [Example code](https://app.zingsoft.com/demos/embed/P6PWYZLI) ### fromNow() Formats a Date in from now format Supported versions: 1.x, 2.x. **Parameters** - `date` (Date): The Date to format - `raw` (Boolean): Indicates if we should include 'ago/to' to indicate past/future **Returns** - String: The formatted date [Example code](https://app.zingsoft.com/demos/embed/NWYBOBCD) ### getAggregate() Get the value of the `aggregate` attribute. Does not return any user defined aggregate columns. Supported versions: 1.x, 2.x. **Returns** - String: Value of the aggregate attribute. [Example code](https://app.zingsoft.com/demos/embed/8TYG2EX8) ### getBatchEdit() Gets the value of the `batch-edit` attribute Supported versions: 1.x, 2.x. **Returns** - Boolean: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/C8N9TQV5) ### getBatchEditStatus() Gets the value of the `batch-edit-status` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/QTI7LSC6) ### getColumnDrag() Gets the value of the `column-drag` attribute Supported versions: 1.x, 2.x. **Returns** - Boolean: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/U12DZX8D) ### getColumnDragAction() Gets the value of the `column-drag-action` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/ZKH9KE8Y) ### getCompact() Gets the value of the `compact` attribute Supported versions: 1.x, 2.x. **Returns** - String | Boolean: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/9CMDZX4R) ### getConstants() Exposes the Constants object for the user to customize Supported versions: 2.x. **Returns** - Object: Object containing constant variables [Example code](https://app.zingsoft.com/demos/embed/KE815753) ### getDir() Gets the dir setting for the grid Supported versions: 1.x, 2.x. **Returns** - String: Value of dir [Example code](https://app.zingsoft.com/demos/embed/L8DLUQT4) ### getGridlines() Gets the value of the `gridlines` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/32PP7TE5) ### getGroupBy() Gets the indexes of the current row groupings. Returns false if none Supported versions: 1.x, 2.x. **Returns** - String | Boolean: Index value of the row-group or false if none. [Example code](https://app.zingsoft.com/demos/embed/7HCE5QSA) ### getHeight() Gets the value of the `height` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/DZLMNJLX) ### getLang() Gets the language used on the grid Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/JBGU6KAC) ### getPreserveStateId() Gets the value of the `preserve-state-id` attribute Supported versions: 1.x, 2.x. **Returns** - ZingGrid: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/3SGEGQKA) ### getPreserveStateLoad() Gets the value of the `preserve-state-load` attribute Supported versions: 1.x, 2.x. **Returns** - ZingGrid: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/PIEI0982) ### getPreserveStateOptions() Gets the value of the `preserve-state-options` attribute Supported versions: 1.x, 2.x. **Returns** - ZingGrid: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/43JHGSEO) ### getPreserveStateSave() Gets the value of the `preserve-state-save` attribute Supported versions: 1.x, 2.x. **Returns** - ZingGrid: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/JKHQMVD1) ### getRowHeight() Gets the value of the `row-height` attribute Supported versions: 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/VQIKSPFX) ### getRowHeightScope() Gets the value of the `row-height-scope` attribute Supported versions: 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/TWLO5FV0) ### getWidth() Gets the value of the `width` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/JOUAEGFJ) ### setAggregate() Sets the `aggregate` attribute Supported versions: 1.x, 2.x. **Parameters** - `aggregate` (String): Value to set aggregate to **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/XF5TFIZU) ### setBatchEdit() Sets the value of the `batch-edit` attribute Supported versions: 1.x, 2.x. **Parameters** - `batchEdit` (Boolean): Value of batch-edit **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/FBI18VKS) ### setBatchEditStatus() Sets the value of the `batch-edit-status` attribute Supported versions: 1.x, 2.x. **Parameters** - `batchEditStatus` (String): Value of the batch-edit-status **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/RNYT7098) ### setBuildCode() 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. Supported versions: 1.x, 2.x. **Parameters** - `buildcode` (Array): The buildcode array **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/MLAIIDW1) ### setColumnDrag() Sets the `column-drag` attribute Supported versions: 1.x, 2.x. **Parameters** - `activate` (Boolean): Boolean value to indicate add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/5CYF83KZ) ### setColumnDragAction() Sets the `column-drag-action` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (Enum): Type of drag to enable **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/FYHHMX6T) ### setCompact() Sets the `compact` attribute Supported versions: 1.x, 2.x. **Parameters** - `activate` (Boolean): Value to add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/TUD3RQAU) ### setDir() Sets the `dir` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (Enum): Type of dir **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/Q1OU5SXW) ### setGridlines() Sets the `gridlines` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (Enum): Type of gridlines to set on the grid **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/971PFN13) ### setGroupBy() Sets the `group-by` attribute Supported versions: 1.x, 2.x. **Parameters** - `index` (String): Index to set the group-by **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/0IOJI4MG) ### setHeight() Sets the `height` attribute Supported versions: 1.x, 2.x. **Parameters** - `height` (Number): Value setting the height of the grid **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/3T3FD7SB) ### setLang() Sets the `lang` attribute Supported versions: 1.x, 2.x. **Parameters** - `lang` (String): Language to set on the grid **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/TJMEFAMW) ### setLicense() 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 Supported versions: 1.x, 2.x. **Parameters** - `license` (Array): The license array **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/5BQIG9HU) ### setPreserveStateId() Sets the `preserve-state-id` attribute Supported versions: 1.x, 2.x. **Parameters** - `id` (String): Value setting the id **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/COGTCBEO) ### setPreserveStateLoad() Sets the `preserve-state-load` attribute as a reference of the user defined method to call on state load Supported versions: 1.x, 2.x. **Parameters** - `functionName` (String): Value setting the function **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/13J3XLOW) ### setPreserveStateOptions() Sets the `preserve-state-options` attribute as a comma separated string of the options Supported versions: 1.x, 2.x. **Parameters** - `options` (String): Value setting the options **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/CSUSRNEW) ### setPreserveStateSave() Sets the `preserve-state-save` attribute as a reference of the user defined method to call on state save Supported versions: 1.x, 2.x. **Parameters** - `functionName` (String): Value setting the function **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/LBTKBD8V) ### setRecordCount() Sets the `record-count` attribute Supported versions: 1.x, 2.x. **Parameters** - `count` (Number): Value setting the count **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/FAE61XH1) ### setRowHeight() Sets the `row-height` attribute Supported versions: 2.x. **Parameters** - `height` (String): CSS height to set for the row height **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/SZYIBHUH) ### setRowHeightScope() Sets the `row-height-scope` attribute Supported versions: 2.x. **Parameters** - `scope` (Enum): Set to 'data', 'headers', or 'all' **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/Z8J9DIBK) ### setState() Sets the grid state with the options passed in Supported versions: 1.x, 2.x. **Parameters** - `state` (String): JSON string or object setting the state [Example code](https://app.zingsoft.com/demos/embed/K4USHNTW) ### setStateField() Sets the grid state for the given field Supported versions: 1.x, 2.x. **Parameters** - `stateName` (String): Name of the state to set - `state` (String): String, JSON string or object setting the state [Example code](https://app.zingsoft.com/demos/embed/8JT6OM4D) ### setWidth() Sets the `width` attribute Supported versions: 1.x, 2.x. **Parameters** - `width` (Number): Value setting the width of the grid **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/O680JNWT) ### updateSize() Forces a resize event to be triggered and to partially repaint the grid. Useful when the container updates size without the window updating. Supported versions: 1.x, 2.x. **Parameters** - `showLoading` (Boolean): Display the loading screen while updating the grid. False by default - `delay` (Number): The time to delay the action. This should be > the time it takes to do the CSS transition. Value in seconds **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/O9ZBIM3X) ## Caption Methods When enabled, `` acts as the title of the grid. Its methods get/set the caption text. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.setCaption("I am the caption"); zgRef.getCaption(); ``` ### getCaption() Gets the value of the `caption` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of attribute [Example code](https://app.zingsoft.com/demos/embed/04GHY1VD) ### setCaption() Set the caption text Supported versions: 1.x, 2.x. **Parameters** - `sCaption` (String): Text to set the caption to. If no string is passed, it will remove the caption. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/CD0S26IB) ## Card Methods `` methods allow customizing default card templates. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.setCardTemplate('templateId'); ``` ### setCardTemplate() Sets the id to reference an external `template` to be used as `` Supported versions: 1.x, 2.x. **Parameters** - `id` (String): Value of id to use the card template. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/9JC1MBG2) ## Column Methods `` methods manipulate columns by sorting, filtering, or hiding targeted columns. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.hideColumn('password'); zgRef.sortColumn('lastName', 'asc'); ``` ### column() Fetches the targeted column. Supported versions: 1.x, 2.x. **Parameters** - `fieldIndex` (String): Field index of column to fetch. **Returns** - Object: Column object. [Example code](https://app.zingsoft.com/demos/embed/YG2ADVW8) ### filterColumn() Filters the column specified by column index. Note: `filter` attribute must be present for this method to work. Supported versions: 1.x, 2.x. **Parameters** - `columnIndex` (String): Index of column. - `filter` (String): Filter string. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/N3YC3ANH) ### filterMenuColumn() 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. Supported versions: 1.x, 2.x. **Parameters** - `fieldIndex` (String): Field Index of column. - `filter` (Object): Advanced Filter configuration. - `filter.conditionals` (Array., optional): Array of conditional objects to filter on - `filter.conditionals[].condition` (String, optional): the key based string for the condition to apply the filter, ie contains, startsWith, greaterThan - `filter.conditionals[].val1` (String, optional): The first value to apply towards the condition - `filter.conditionals[].val2` (String, optional): The second value to apply towards the condition - `filter.boolean` (String, optional): 'and' or 'or' indicating how to filter multiple conditionals. Default is 'and' - `filter.matchCase` (Boolean, optional): Boolean indicating if the matching should be case sensitive. Default is false - `filter.selectItems` (Array., optional): Array of items to select in the filter menu selectbox **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/NWJJZFHZ) ### getColClass() Gets the value of the `col-class` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/DWFXF284) ### getFrozenColumnsLeft() Gets the value of the `frozen-columns-left` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/H9DBXDZP) ### getFrozenColumnsRight() Gets the value of the `frozen-columns-right` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/Q0AZYCO8) ### getHeaderAutoFormat() Gets the value of the `header-auto-format` attribute Supported versions: 1.x, 2.x. **Returns** - Boolean: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/UJ1F3ZZ5) ### getNestedDataSeparator() Gets the value of the `nested-data-separator` attribute Supported versions: 1.x, 2.x. **Returns** - Boolean: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/S7MVK7MR) ### hideColumn() Hides a column based on index Supported versions: 1.x, 2.x. **Parameters** - `columnIndex` (String): Index of column to hide **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/HNG153JM) ### hideColumnType() Hides all columns with the given column type Supported versions: 1.x, 2.x. **Parameters** - `columnType` (String): Type of the columns to hide **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/OBTJ3TFE) ### resetFilter() Resets the current filter. Resets either the specified column or all the columns Supported versions: 1.x, 2.x. **Parameters** - `fieldIndex` (String, optional): Index of column. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/HP881LH3) ### setColClass() Sets the `col-class` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (String): Class name or function name **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/F22M97JN) ### setColumns() Sets the `columns` property Supported versions: 1.x, 2.x. **Parameters** - `columns` (Array): Array of column objects **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/2KXB4WP6) ### setColumnsControl() Sets the `columns-control` attribute Supported versions: 1.x, 2.x. **Parameters** - `activate` (Boolean): Value to add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/4BO1V47O) ### setFrozenColumnsLeft() Sets the `frozen-columns-left` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (Number): The number of columns to freeze to the left **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/RFEN3LCZ) ### setFrozenColumnsRight() Sets the `frozen-columns-right` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (Number): The number of columns to freeze to the right **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/LSSHGJPP) ### setHeaderAutoFormat() Sets the `header-auto-format` attribute Supported versions: 1.x, 2.x. **Parameters** - `activate` (Boolean): Value to add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/9Q9QPOXB) ### setNestedDataSeparator() Sets the `nested-data-separator` attribute Supported versions: 1.x, 2.x. **Parameters** - `separator` (String): The separator value **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/RMRSFXAI) ### showColumn() Sets column to be visible Supported versions: 1.x, 2.x. **Parameters** - `columnIndex` (String): Index of column to show **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/UQHH8ZQ1) ### sortColumn() Sorts the given column with the given sort direction Supported versions: 1.x, 2.x. **Parameters** - `columnIndex` (String): Index of column to sort - `direction` (String): Sort Direction: asc, desc, or none **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/ON5CARNY) ### toggleColumn() Toggles the visibility of a column by index Supported versions: 1.x, 2.x. **Parameters** - `columnIndex` (String): Index of column to toggle - `hide` (Boolean): Visibility of column **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/9EUFZQIR) ## Data Methods `` methods allow changing or grabbing data in the grid. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.setData('[1, 2, 3]'); zgRef.getSrc(); ``` ### getData() Fetches the internal property referencing the dataset for the grid Supported versions: 1.x, 2.x. **Parameters** - `config` (Object): 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) **Returns** - Array | Object: The dataset. [Example code](https://app.zingsoft.com/demos/embed/WXJM54FT) ### getSrc() Gets the value of the `src` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of attribute [Example code](https://app.zingsoft.com/demos/embed/65BH3JJH) ### getTemplateEndDelimiter() Gets the value of the `template-end-delimiter` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/356O5CQH) ### getTemplateStartDelimiter() Gets the value of the `template-start-delimiter` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/U52PHUWE) ### insertRow() Inserts a new row into the grid Supported versions: 1.x, 2.x. **Parameters** - `data` (Object, optional): Data to insert into new row - `id` (String, optional): If the id is already set on the new record, pass it in here - `noDataSource` (Boolean, optional): If you only want to do a local insert, set `noDataSource` to "true" **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/7C8K3S0R) ### refresh() Refreshes all cells. Note: if using static data, original cell value will be restored. Supported versions: 1.x, 2.x. **Returns** - Undefined: N/A [Example code](https://app.zingsoft.com/demos/embed/C0VU05L5) ### refreshGrid() Refreshes entire grid. Useful for language change. Supported versions: 1.x, 2.x. **Returns** - Undefined: N/A [Example code](https://app.zingsoft.com/demos/embed/ONXSD3GH) ### removeRecord() Removes a record from the grid Supported versions: 1.x, 2.x. **Parameters** - `id` (String, optional): ID of the record to remove - `noDataSource` (Boolean, optional): If you only want to remove from the grid and not the external datasource, set `noDataSource` to "true" **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/E5WDZ3GC) ### removeRow() Removes a row from the grid Supported versions: 1.x, 2.x. **Parameters** - `rowIndex` (String, optional): Row index (0 based) of the record to remove - `noDataSource` (Boolean, optional): If you only want to remove from the grid and not the external datasource, set `noDataSource` to "true" **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/2W8QFOZT) ### setData() Sets or updates the dataset for the grid Supported versions: 1.x, 2.x. **Parameters** - `data` (Array | Object): JSON data - `bKeepSort` (Boolean): If true, the grid will try to maintain the sort on the new data. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/16TN8AXU) ### setSrc() Sets the `src` attribute Supported versions: 1.x, 2.x. **Parameters** - `src` (String): Value to indicate a path to a remote data source **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/LCIB7MYU) ### setTemplateEndDelimiter() Sets the `template-end-delimiter` attribute Supported versions: 1.x, 2.x. **Parameters** - `delim` (String): Value to indicate regex expression for closing data binding **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/FO1OZLPN) ### setTemplateStartDelimiter() Sets the `template-start-delimiter` attribute Supported versions: 1.x, 2.x. **Parameters** - `delim` (String): Value to indicate regex expression for opening data binding **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/DR9KPT73) ### updateCellByID() Updates a cell in the grid Supported versions: 1.x, 2.x. **Parameters** - `id` (Number): ID of the record to update - `fieldIndex` (Number): Field index of the cell to update - `val` (*): New Value - `noDataSource` (Boolean, optional): If you only want to update the grid and not the external datasource, set `noDataSource` to "true" **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/YQX4FZMK) ### updateCellByPosition() Updates a cell in the grid Supported versions: 1.x, 2.x. **Parameters** - `rowIndex` (Number): Row index (0 based) of the cell to update - `columnIndex` (Number): Column index (0 based) of the cell to update - `val` (*): New Value - `noDataSource` (Boolean, optional): If you only want to update the grid and not the external datasource, set `noDataSource` to "true" **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/3KMH7QTT) ### updateRecord() Updates a record in the grid Supported versions: 1.x, 2.x. **Parameters** - `id` (String, optional): ID of the record to update - `data` (Object, optional): Data to update - `noDataSource` (Boolean, optional): If you only want to update the grid and not the external datasource, set `noDataSource` to "true" - `noRefresh` (Boolean, optional): 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" **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/FTIETDHO) ### updateRow() Updates a row in the grid Supported versions: 1.x, 2.x. **Parameters** - `rowIndex` (String): Row index (0 based) of the record to update - `data` (Object): Data to update - `noDataSource` (Boolean, optional): If you only want to update the grid and not the external datasource, set `noDataSource` to "true" - `noRefresh` (Boolean, optional): 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" **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/9L8CMADP) ## Dialog Methods `` methods allow customizing default dialog box text. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.customizeDialog('record-update', { cancel: 'cancel button text', confirm: 'confirmation button text', title: 'dialog box title' }); ``` ### closeDialog() Closes currently opened dialogs Supported versions: 1.x, 2.x. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/LKSPSD0C) ### customizeDialog() Customizes the user's dialog Supported versions: 1.x, 2.x. **Parameters** - `type` (String): 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 - `config` (Object): 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) **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/LTM0L1OZ) ## Editor Methods `` 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** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.setEditor('row'); zgRef.getEditor(); ``` ### getConfirmations() Gets the value of the `confirmations` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/0NPDW7HG) ### getCreator() Gets the value of the `creator` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/5IAWGIZE) ### getEditor() Gets the value of the `editor` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/ZP7L5UOE) ### getEditorControls() Gets the value of the `editor-controls` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/LMIT87GJ) ### getRecordDuplicate() Gets the value of the `record-duplicate` attribute Supported versions: 1.x, 2.x. **Returns** - Boolean: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/2PPQ9916) ### getRowSelector() Gets the value of the `row-selector` attribute Supported versions: 1.x, 2.x. **Returns** - Boolean: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/AMYQRQWX) ### openRowEditor() Opens specified row in edit mode if editing is allowed Supported versions: 1.x, 2.x. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/DXAG58GW) ### setConfirmations() Sets the `confirmations` attribute Supported versions: 1.x, 2.x. **Parameters** - `types` (String): string value to indicate what confirmations to enable **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/MT61FWMX) ### setCreator() Sets the `creator` attribute Supported versions: 1.x, 2.x. **Parameters** - `sMode` (String): Value of the creator mode **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/R1WCLI2N) ### setEditor() Sets the `editor` attribute Supported versions: 1.x, 2.x. **Parameters** - `activate` (Boolean | String): Boolean value to indicate add or remove, or string value to indicate the editor type **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/VTIAY9FG) ### setEditorControls() Sets the `editor-controls` attribute Supported versions: 1.x, 2.x. **Parameters** - `types` (Boolean | String): Boolean value to indicate add or remove, or string value to indicate what editor controls to add **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/TPO80NAU) ### setRecordDuplicate() Sets the `record-duplicate` attribute Supported versions: 1.x, 2.x. **Parameters** - `duplicate` (Boolean): Value to add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/GJYS2FY5) ### setRowSelector() Sets the `row-selector` attribute Supported versions: 1.x, 2.x. **Parameters** - `activate` (Boolean): Value to add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/VYMAXZVT) ## Filter Methods `` methods can toggle the filter or get its attribute value. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.setFilter(); zgRef.getFilter(); ``` ### getFilter() Gets the value of the `filter` attribute Supported versions: 1.x, 2.x. **Returns** - Boolean: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/TEXBT9XY) ### setFilter() Sets the `filter` attribute Supported versions: 1.x, 2.x. **Parameters** - `activate` (Boolean): Value to add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/KIU4DT58) ## Foot Methods `` methods affect the table footer. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.getFootClass(); ``` ### getFootClass() Gets the value of the `foot-class` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/69TCOD2T) ### setFootClass() Sets the `foot-class` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (String): class name or function name **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/1RMHW3K5) ## Head Methods `` methods affect the table headers. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.getHeadClass(); ``` ### getHeadClass() Gets the value of the `head-class` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/RCEOBKBU) ### setHeadClass() Sets the `head-class` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (String): Class name or function name **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/SKKUJT7I) ## Icon Methods `` methods allow adding and manipulating user defined icon sets. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.getIconSet(); ``` ### getIconSet() Gets the value of the `icon-set` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/1VT44D59) ### setIconSet() Sets the `icon-set` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (String): Icon set to use in the grid **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/QETBJ2WO) ## Layout Methods `` methods will adjust the current grid layout display. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.setLayout('card'); ``` ### getLayout() Gets the value of the `layout` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/JQLUGDKY) ### getLayoutControls() Gets the value of the `layout-controls` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/M2RYZHR1) ### setLayout() Sets the `layout` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (Enum): Value to indicate the grid layout **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/HD3VJYUL) ### setLayoutControls() Sets the `layout-controls` attribute Supported versions: 1.x, 2.x. **Parameters** - `activate` (Boolean): Value to add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/8C4VKP9O) ## 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** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.setContentMenu(); zgRef.closeContextMenu(); ``` ### closeContextMenu() Closes currently opened contextmenu. Supported versions: 1.x, 2.x. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/KAFDGIDP) ### getColumnsControl() Gets the value of the `columns-control` attribute Supported versions: 1.x, 2.x. **Returns** - Boolean: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/F9GK3NR8) ### getContextMenu() Gets the value of the `context-menu` attribute Supported versions: 1.x, 2.x. **Returns** - String | Boolean: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/F9GK3NR8) ### getStaticMenu() Gets the value of the `static-menu` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of attribute [Example code](https://app.zingsoft.com/demos/embed/MW02GB99) ### setContextMenu() Sets the `context-menu` attribute. Supported versions: 1.x, 2.x. **Parameters** - `types` (Boolean | String): Boolean value to indicate add or remove, or string value to indicate reference to id of context-menu. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/IFD5DPS2) ### setStaticMenu() Sets the `static-menu` attribute Supported versions: 1.x, 2.x. **Parameters** - `activate` (Boolean): Value to add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/VUHZSZMM) ## Pager Methods When enabled, pager controls are located at the bottom of the grid and provide a way to navigate through the grid. `` methods allow you to change pages and set page size or options. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.setPager(); zgRef.setPageSize(10); zgRef.lastPage(); ``` ### firstPage() Navigates to first page in the grid Supported versions: 1.x, 2.x. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/OVFV2SXI) ### getPageIndex() Gets the current page. Does not apply to cursor paging. Supported versions: 1.x, 2.x. **Returns** - Number: Page index [Example code](https://app.zingsoft.com/demos/embed/DPU57396) ### getPager() Gets the value of the `pager` attribute Supported versions: 1.x, 2.x. **Returns** - Boolean: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/QNR08A9M) ### getPageSize() Gets the current `page-size` Supported versions: 1.x, 2.x. **Returns** - Number: Page size [Example code](https://app.zingsoft.com/demos/embed/KG1HXH0X) ### getPageSizeCard() Gets the value of the `page-size-card` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/3YCURUTK) ### getPageSizeRow() Gets the value of the `page-size-row` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/ODBAS4DS) ### lastPage() Navigates to the last page in the grid Supported versions: 1.x, 2.x. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/O8X725D3) ### nextPage() Navigates to the next page in the grid Supported versions: 1.x, 2.x. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/86ISES2C) ### prevPage() Navigates to the previous page in the grid Supported versions: 1.x, 2.x. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/J8RVF47F) ### setPageIndex() Changes the current page index to be the specified value Supported versions: 1.x, 2.x. **Parameters** - `pageIndex` (Number): New page index **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/EDNZPHKK) ### setPager() Sets the `pager` attribute Supported versions: 1.x, 2.x. **Parameters** - `activate` (Boolean): Value to add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/VNPR5GYQ) ### setPageSize() Changes the current page size to be the specified value Supported versions: 1.x, 2.x. **Parameters** - `pageSize` (Number): New page size **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/GN1AKHZH) ### setPageSizeCard() Changes the current page size to be the specified value in card mode Supported versions: 1.x, 2.x. **Parameters** - `pageSize` (Number): New card page size **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/32SWY7UL) ### setPageSizeOptions() Sets the page size options for the pager drop down Supported versions: 1.x, 2.x. **Parameters** - `options` (String): Comma separated list of numerical page sizes **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/HNNG7A7B) ### setPageSizeRow() Changes the current page size to be the specified value in row mode Supported versions: 1.x, 2.x. **Parameters** - `pageSize` (Number): New row page size **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/2XKLG8ML) ## Row Methods `` methods allow you to add and edit rows in the grid. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.insertRow(); ``` ### getFrozenRowClass() Gets the value of the `frozen-row-class` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/E6W7K6YZ) ### getFrozenRowsBottom() Gets the value of the `frozen-rows-bottom` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/KAPVIGCW) ### getFrozenRowsTop() Gets the value of the `frozen-rows-top` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/GQM5ATNA) ### getRowClass() Gets the value of the `row-class` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/NS9DTPVW) ### getZebra() Gets the value of the `zebra` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/PHLIWZLI) ### row() Fetches the targeted row. Supported versions: 1.x, 2.x. **Parameters** - `rowContainerIndex` (Number): The index of the row to fetch. **Returns** - Object: Row object. [Example code](https://app.zingsoft.com/demos/embed/3YPWR3D0) ### setFrozenRowClass() Sets the `frozen-row-class` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (String): Class name or function name **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/M1WDULHW) ### setFrozenRowsBottom() Sets the `frozen-rows-bottom` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (Number): The number of rows to freeze to the bottom **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/Y54B9WMY) ### setFrozenRowsTop() Sets the `frozen-rows-top` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (Number): The number of rows to freeze to the top **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/2UUE2O8G) ### setRowClass() Sets the `row-class` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (String): Class name or function name **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/FM9H02Y3) ### setZebra() Sets the `zebra` attribute Supported versions: 1.x, 2.x. **Parameters** - `type` (String): Class name or function name **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/AQPW66ZC) ## Search Methods `` methods allow you to toggle searching capabilities. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.setSearch(); ``` ### getSearch() Gets the value of the `search` attribute Supported versions: 1.x, 2.x. **Returns** - Boolean: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/JWOQCJXO) ### searchGrid() Searches the grid with the search term indicated Supported versions: 1.x, 2.x. **Parameters** - `search` (String): Search term **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/DDUW15BM) ### setSearch() Sets the `search` attribute Supported versions: 1.x, 2.x. **Parameters** - `activate` (Boolean): Value to add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/LO0ZU5OQ) ## Selector Methods `` methods allow users to make a selection on the grid by outlining the selected cell(s). **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.setSelector(); zgRef.getSelector(); ``` ### deselect() Deselects all cells Supported versions: 1.x, 2.x. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/N5EBJDP4) ### deselectRow() Deselects row at given 0 based index. Supported versions: 1.x, 2.x. **Parameters** - `rowIndex` (String): Row to deselect **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/Q8LKCUES) ### deselectRows() Deselects any row selected by the row selector column Supported versions: 1.x, 2.x. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/46Q7YC9T) ### getSelectedRows() Returns an array of selected rows Supported versions: 1.x, 2.x. **Returns** - Array: Selected Data [Example code](https://app.zingsoft.com/demos/embed/SQV8GJ9Q) ### getSelector() Gets the value of the `selector` attribute Supported versions: 1.x, 2.x. **Returns** - Boolean: Value of attribute [Example code](https://app.zingsoft.com/demos/embed/LGD8NBIH) ### select() Selects one or more cells Supported versions: 1.x, 2.x. **Parameters** - `rowIndex` (String): Row of cell to select - `colIndex` (String): Column of cell to select - `endRowIndex` (String, optional): Optional end cell row for multi-cell selection - `endColIndex` (String, optional): Optional end cell column for multi-cell selection **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/LPX2VU11) ### selectAll() Selects all cells Supported versions: 1.x, 2.x. **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/NPIE2UP8) ### selectRow() Selects row at given 0 based index. Will not select if there is no selector column or index is off page. Supported versions: 1.x, 2.x. **Parameters** - `rowIndex` (String): Row to select **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/UK2A63SA) ### setSelector() Sets the `selector` attribute Supported versions: 1.x, 2.x. **Parameters** - `activate` (Boolean): Value to add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/646X7HUT) ## Sorter Methods `` methods enable sorting a column, which is triggered by clicking on column headers. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.setSorter(); zgRef.getSorter(); ``` ### getSort() Gets the value of the `sort` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/U5OIQ6AQ) ### getSortedColumn() Gets the current sorted column as well as the sort direction Supported versions: 1.x, 2.x. **Returns** - Object: Object containing: fieldIndex - the currently sorted column, order - the sort direction [Example code](https://app.zingsoft.com/demos/embed/OSLSCGV9) ### getSorter() Gets the value of the `sorter` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/ET4L3N1D) ### setSort() Sets the `sort` attribute Supported versions: 1.x, 2.x. **Parameters** - `types` (Boolean): Boolean value to indicate add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/AAVOU37N) ### setSorter() Sets the `sorter` attribute Supported versions: 1.x, 2.x. **Parameters** - `types` (Boolean | String): String value to indicate reference to custom sorter function **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/AAVOU37N) ## Source Methods `` methods allow changing of the grid's data reference or source. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.setSource('New Source: https://www.zinggrid.com'); ``` ### getSource() Gets the value of the `source` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute. [Example code](https://app.zingsoft.com/demos/embed/A4BZ8WAS) ### setSource() Sets the `source` attribute. Not to be confused with `src` attribute, the `source` attribute is for citation. Supported versions: 1.x, 2.x. **Parameters** - `value` (String): Source of the data in the grid **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/Z6CMG9G0) ## Theme Methods Theme methods allow changing the theme of the grid. Currently, `` comes with a couple default themes like: Default, iOS, and Android. (Theme Methods Playground). **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.setTheme('ios'); zgRef.getTheme(); ``` ### getTheme() Gets the value of the `theme` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of attribute [Example code](https://app.zingsoft.com/demos/embed/WG9V99WB) ### setTheme() Sets the `theme` attribute Supported versions: 1.x, 2.x. **Parameters** - `theme` (String): Value to indicate which theme to set **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/DIUE56EF) ## 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** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.getViewport(); ``` ### getViewport() Gets the value of the `viewport` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/CUZ59D72) ### getViewportPause() Gets the value of the `viewport-pause` attribute Supported versions: 1.x, 2.x. **Returns** - Boolean: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/PQ4W6VOP) ### getViewportStop() Gets the value of the `viewport-stop` attribute Supported versions: 1.x, 2.x. **Returns** - Boolean: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/4KCRBHE2) ### getViewportTypes() Gets the value of the `viewport-types` attribute Supported versions: 1.x, 2.x. **Returns** - String: Value of the attribute [Example code](https://app.zingsoft.com/demos/embed/OEUI9GPO) ### setViewportPause() Sets the `viewport-pause` attribute Supported versions: 1.x, 2.x. **Parameters** - `activate` (Boolean): Value to add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/Z6CMG9G0) ### setViewportStop() Sets the `viewport-stop` attribute Supported versions: 1.x, 2.x. **Parameters** - `activate` (Boolean): Value to add or remove **Returns** - ZingGrid: Returns the component so that you can chain methods together [Example code](https://app.zingsoft.com/demos/embed/AFCCMG4D)