CRUD Read

ZingGrid has default behavior for READ actions. There are expected inputs and outputs for a READ action. You can of course extend and override this default behavior by adjusting src attribute and other zg-param attributes.

CRUD Defaults

The default send and return values for CRUD actions.

CRUD Defaults
ActionTypeResponse CodesReturns
SuccessError
Create rowPOST200 - 299>= 400

Expected Return Contents

  1. Entire dataset
  2. Single record
  3. ID of record
Read dataGET200 - 299>= 400

Expects a JSON or dataset response.

Update rowPUT200 - 299>= 400

Response is not read.

Update cellPATCH200 - 299>= 400

Response is not read.

Delete rowDELETE200 - 299>= 400

Response is not read.

Override Defaults

If you need to override any default read actions you can use readOptions to adjust all actions against the initial, and subsequent fetches from the grid. You can read more about available readOptions values here.

Remember, since value is an HTML attribute it must be a valid JSON format and stringified.

Here is a list of available readOptions:

CloseCopy Copied
{
  // to change the read method of the action to POST
  "method": "POST",
  // takes a JSON packet to be sent to the server in place of the action
  // in this case user_id is always one.
  "body": {user_id:1},
  "requestType": "application/json",
  "exclude": "",
  "headers": {"Authorization": "Basic super-secrete-key"},
  "mode": "no-cors",
  "responseType": "",
  "src": "",
  "queryString": ""
}

The body value can be a static JSON:

CloseCopy Copied
<!-- basic read option with static body -->
<zg-param name="readOptions" value='{"body": {"user_id":1}}'></zg-param>

The body value can also be a function:

CloseCopy Copied
<!-- basic read option with function reference for body -->
<zg-param name="readOptions" value='{"body": "_fncStringReference"}'></zg-param>

Where the function returns the following:

CloseCopy Copied
// function returns an object
function _fncStringReference(record) {
  return {
    // to change the read method of the action to POST
    method: 'POST',
    // takes a JSON packet to be sent to the server in place of the action
    // in this case user_id is always one.
    body: {user_id:1},
    requestType: 'application/json',
    exclude: '',
    headers: {"Authorization": "Basic super-secrete-key"},
    mode: 'no-cors',
    responseType: '',
    src: '',
    queryString: ''
  }
}

GET Data

You will need to point your grid to a remote data src. You can achieve this through the src attribute or a various combination of zg-data and zg-param. We have extensive docs connecting to remote data sources in our getting started section.

You can point to a top level data structure:

CloseCopy Copied
<zing-grid>
  <zg-data src="https://zinggrid-docs-crud-basics.glitch.me/users"></zg-data>
</zing-grid>

You can point to a nested data structure with recordPath:

CloseCopy Copied
<zing-grid>
  <zg-data src="https://zinggrid-docs-crud-basics.glitch.me/company">
    <zg-param name="recordPath" value="employees"></zg-param>
  </zg-data>
</zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Authorization

If you need to add an authorization header you can achieve this through zg-param and add the header value to it. You can read more about available zg-param values here.

You can directly add the Authorization header in the markup with the header value. This will set the Authorization header for ALL request from this grid.

CloseCopy Copied
<zing-grid>
  <zg-data src="https://zinggrid-docs-crud-basics.glitch.me/company">
    <zg-param name="recordPath" value="users"></zg-param>
    <zg-param name="header" value='{"Authorization": "Basic super=secret=hash"}'></zg-param>
  </zg-data>
</zing-grid>

API Key

If you need to add an API token header you can achieve this through zg-param and add the header value to it. You can read more about available zg-param values here.

You can directly add the header in the markup with the header value. This will set the API-key header for ALL request from this grid.

CloseCopy Copied
<zing-grid>
  <zg-data src="https://zinggrid-docs-crud-basics.glitch.me/company">
    <zg-param name="recordPath" value="users"></zg-param>
    <zg-param name="header" value='{"API-key": "super=secret=hash"}'></zg-param>
  </zg-data>
</zing-grid>

If you are using a third party API and have an API token it is best practice to use a server as a proxy. This will abstract and hide your API key out of the client. You can use the following glitch example as a way to abstract an API key away.

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading