<zg-param>name values are an extension of the ZingGrid library and are used to increase and alter fetching data or alter data on return from fetch.
<zing-grid
pager
page-size="5"
layout="row"
layout-controls="disabled"
viewport-stop>
<zg-caption>
ZingGrid Star Wars Server Paging
<span class="button" id="reloadBtn">Reload Demo</span>
</zg-caption>
<zg-data>
<!-- define the main source for the API -->
<zg-param name="src" value="https://swapi.py4e.com/api/people/"></zg-param>
<!-- define the path in the JSON to get the array of results.
In this case it is body.results -->
<zg-param name="recordPath" value="results"></zg-param>
<!-- if loadByPage is set to true it will go to the
server for each new page of data -->
<zg-param name="loadByPage" value="true"></zg-param>
<!-- define the "page" query parameter -->
<zg-param name="pageKey" value="page"></zg-param>
<!-- Need to tell ZG how many records were returned so it knows
how to divide up the page-size -->
<zg-param name="countPath" value="count"></zg-param>
<!-- define the path in the result JSON to find next/prev urls -->
<zg-param name="nextPath" value="next"></zg-param>
<zg-param name="prevPath" value="previous"></zg-param>
</zg-data>
<zg-colgroup>
<zg-column index="name"></zg-column>
<zg-column index="height"></zg-column>
<zg-column index="mass"></zg-column>
<zg-column index="hair_color"></zg-column>
<zg-column index="eye_color"></zg-column>
<zg-column index="skin_color"></zg-column>
</zg-colgroup>
</zing-grid>
<zg-param> is a non-visual element used to pass the configuration options for the <zg-data> element more cleanly via name-value pairs. The element is not required, though it is preferred, as everything set within a <zg-param> element can also be set directly on <zg-data> via the config attribute (developers should note this when setting complex values for the value attribute to use JSON encoded values). As a non-visual element, CSS styling does not apply to <zg-param>.
The list below is detailed information about the name values used in <zg-param>. The example input column demonstrates the type of value to feed to the name attribute. The related attributes column shows other parameters that usually go in conjunction with the current one.
zg-param name Values
Name
Example Input
Description
Related Attributes
Demo
adapter
firebase
Adapter is a shortcut to set known options for specific third party datasets. Currently supports graphql and firebase. Developers could register their own custom adapters. For more information on custom adapters, visit Guides > ZingGrid Object > registerAdapter().
In the case of non-key based objects, the idKey can be set to indicate the id to send back to the datasource on CRUD commands. For example, if the READ URL was https://zinggrid-named.firebaseio.com/ then the UPDATE would be https://zinggrid-named.firebaseio.com/VALUE_OF_IDKEY.
Null
newIndexPath
"newId"
Specifies the path of the insert or CREATE response that returns an object to indicate the key value of the new record. By default, it is set to the idKey or the raw value of the response so it would not be necessary to set this property.
Sets the path of the JSON object response to where the grid data is located. When not specified, it is assumed that the whole JSON object response is the grid data. This value takes in dot notation.
Null
nodePath
"node"
Sets the path of the JSON object within the array. When not specified, it is assumed that the array contains the JSON object. This value takes in dot notation.
The query parameter that specifies the start location. Must specify either nextPath, nextIDPath, pageKey or startAtKey when using loadByPage or loadByScroll.
Boolean indicating if we should handle the loadByPage as cursor-based. If set to true, no count or number of pages will be displayed. Used in loadByPage
Boolean value enabling each page of data to be retrieved from server. Requires setting sortBy in Firebase. Must specify either nextPath, nextIDPath, pageKey or startAtKey when using loadByPage.
Boolean value enabling infinite scrolling. Enabling infinite scrolling requires setting height on <zing-grid> and also setting the following: limitToKey, startAtKey, sortByKey, startAtValue, and sortBy. The first four are set when using Firebase adapter. Must specify either nextPath, nextIDPath, pageKey or startAtKey when using loadByScroll.
If set, adds the next key to the URL to get to the next recordset. Must specify either nextPath, nextIDPath, pageKey or startAtKey when using loadByPage.
Sets the options for CREATE request. Options are formatted as a JSON string. Avalable options for requests: body, requestType, exclude, headers, method, mode, responseType, src, queryString. Not neccessary to set, the top-level values will be taken instead.
Sets the options for READ request. Options are formatted as a JSON string. Available options for requests: body, requestType, exclude, headers, method, mode, responseType, src, queryString. Not necessary to set, the top-level values will be taken instead.
Sets the options for UPDATE row request. Available options for requests: body, requestType, exclude, headers, method, mode, responseType, src, queryString. Not necessary to set, the top-level values will be taken instead.
Sets the options for UPDATE cell request. Available options for requests: body, requestType, exclude, headers, method, mode, responseType, src, queryString. Not necessary to set, the top-level values will be taken instead.
Sets the options for UPDATE request. Options can be set to either "cell" or "row" updates, the types of updates used in ZingGrid; options are formatted as a JSON string. Available options for requests: body, requestType, exclude, headers, method, mode, responseType, src, queryString. Not necessary to set, the top-level values will be taken instead.
Sets the options for DELETE request. Options are formatted as a JSON string. Available options for requests: body, requestType, exclude, headers, method, mode, responseType, src, queryString. Not necessary to set, the top-level values will be taken instead.
Set to "manual" if you want to turn off traditional REST URL construction and method setting. The method settings for restmode="manual" is GET = GET and the all other = POST. To update method settings, use updateCellMethod, deleteMethod, etc.
Sets the body or query string of the request, which overwrites the ZingGrid generated query string. Can be set to a template string, string, or function name. If set to function name, the function takes in rawData, method, and src and returns an object to send as body for request.
Sets the suffix for the function name that will construct the body for the request. Will set the createBody, readBody, updateRowBody, updateCellBody, and deleteBody parameters to: create + suffix read + suffix updateRow + suffix updateCell + suffix delete + suffix
Sets the body on the create request Can be set to a template string, string, or function name. If set to function name, the function takes in rawData, method, and src and returns an object to send as body for request.
Sets the body on the read request Can be set to a template string, string, or function name. If set to function name, the function takes in rawData, method, and src and returns an object to send as body for request.
Sets the body on the update row request Can be set to a template string, string, or function name. If set to function name, the function takes in rawData, method, and src and returns an object to send as body for request.
Sets the body on the update cell request Can be set to a template string, string, or function name. If set to function name, the function takes in rawData, method, and src and returns an object to send as body for request.
Sets the body on the delete request Can be set to a template string, string, or function name. If set to function name, the function takes in rawData, method, and src and returns an object to send as body for request.
Sets the function that handles the external data handling for creating new records The function takes in recordId, rawData, and options and returns an object to send as body for request.
Sets the function that handles the external data handling for reading data The function takes in options and returns an object to send as body for request.
Sets the function that handles the external data handling for updating a cell of data The function takes in recordId, rawData, and options and returns an object to send as body for request.
Sets the function that handles the external data handling for updating a row of data The function takes in recordId, rawData, and options and returns an object to send as body for request.
Sets the function that handles the external data handling for delete The function takes in recordId, rawData, and options and returns an object to send as body for request.
