Docs

zg-param

ZingGrid has a predefined set of param name values which have default behavior fetching and recieving data.

Usage

zg-param name values are an extension of the ZingGrid library and are used to increase and alter fetching data or altering data on return from fetch.

Example Usage

<zing-grid
  caption="Star Wars API"
  pager
  page-size="5"
  layout="row"
  layout-controls="disabled"
  viewport-stop>
  <zg-data>
    <!-- define the main source for the API -->
    <zg-param name="src" value="https://swapi.co/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>
</zing-grid>

Demo

Name Values

Detailed information about the name values used in <zg-param>. The example input column demonstrates the type of value to feed to name attribute. While related attributes column shows other params that usually go in conjuction with the current one.

zg-param name Values
NameExample InputDescriptionRelated AttributesDemo
adapterfirebaseAdapter is a shortcut to set known options for specific third party datasets. Currently, the only build-in option offered is "firebase". Developers could register their own custom adapters. For more information on custom adapters, visit Guides > ZingGrid Object > registerAdapter().
idKey"state"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 neccessary to set this property.
recordPath"data.result" | "result"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
searchKey"searchBy" | "searchOn"The query parameter to specify the search value.
"search term"The value to search by. This is automatically generated when search using <zg-search>, but developer has option to specify if preferred.
sortByKey"orderBy"The query parameter to specify the sort field.
sortBy"column index"Specifies the property to sort on. This is automatically generated on column sort.
sortDirKey"sortDir"The query parameter that specifies sort direction.
sortDir"asc" | "desc"Sets the sort direction. This is automatically generated on column sort.
startAtKey"startAt"The query parameter that specifies the start location. Must specify either nextPath, nextIDPath, pageKey or startAtKey when using loadByPage or loadByScroll.
startAtValuetrueBoolean value indicating that a value is required (instead of an index) for the next start value.
limitToKey"limitTo" | "limitToFirst"The query parameter to specify limitTo amount. Required to be used in loadByScroll or loadByPage.
limitTo10Sets the page size. Uses ZingGrid page size by default, so should not set.
pageKey5The query parameter to specify the page. Must specify either nextPath, nextIDPath, pageKey or startAtKey when using loadByPage or loadByScroll.
countPath"total"Sets the value to path of the total count of records.
cursortrueBoolean 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
loadByPagetrueBoolean 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.
loadByScrolltrueBoolean 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.
hasNextPath"hasNext"Path to check if there is more data.
nextPath"next"If set, looks at response packet for full link to next path. Must specify either nextPath, nextIDPath, pageKey or startAtKey when using loadByPage.
nextIDPath"next"If set, looks at response packet for ID to next path.
nextIDKey"next"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.
hasPrevPath"hasPrev"Path to check if there is previous data.
prevPath"prev"If set, looks at repsonse for link to previous path.
prevIDPath"prev"If set, looks at response packet for ID to prev path.
prevIDKey"prev"If set, adds the prev key to the URL to get to the previous recordset.
pageBase0If loadByPage enabled, sets this to base page. The default is 1.
createOptions'{"method": "POST", "body": "buildInsert"}'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.
readOptions'{"method": "GET"}'Sets the options for READ 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.
updateOptions'{"row":{"method": "PATCH", "body": "buildUpdate"}}'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. 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.
deleteOptions'{"exclude": true}'Sets the options for DELETE 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.
src"https://url-to-your-api"Option for request type. Sets the base URL for the request. ID is automatically inserted in the src for DELETE and UPDATE requests.
method"GET"Option for request type (GET, POST, PUT, etc). ZingGrid uses the standard request type per action, but it can overwritten with this param.
headers'{"Authorization": "token ################################"}'Option for request type. Sets headers for request.
queryString"?query=value"Option for request type. Adds an additional query string to request.
body"functionName"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.
excludetrueIf enabled, method will not call the external REST API.
requestType"multipart/form-data"Sets the Content Type for the request. The default is application/json.
responseType"application/xml"Sets the Content Type for the response. The default is application/json.
mode'cors'Sets to 'cors' to specify the settings for cors request. The external server must enable 'cors' for this to take effect.