CRUD Read

ZingGrid has default behavior for read actions. There are expected inputs and outputs for a read action. You can, of course, extend or override this default behavior by adjusting the src attribute and other attributes in the <zg-param> element.

CRUD Defaults

The default send and return values for CRUD actions are:

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

Expected Return Contents

  1. Entire dataset
  2. Single record or 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 in valid JSON format and stringified.

Here is a list of available readOptions:

{
  // 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, like so:

<!-- 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 which returns an object, like so:

<!-- basic read option with function reference for body -->
<zg-param name="readOptions" value='{"body": "_fncStringReference"}'></zg-param>
// 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

For a GET request to work, you will need to point your grid to a remote data source. You can achieve this through the src attribute or a combination of <zg-data> and <zg-param> tags. We have extensive docs about connecting to remote data sources in our Getting Started section.

You can point to a top level data structure, like so:

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

You can also use recordPath to point to a nested data structure, like so:

<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>

Remote Data Grid

Here is our complete grid pointing to a remote data source:

Top

Authorization

If you need to add an Authorization header, you can achieve this by adding a <zg-param> element and adding a header attribute 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 (see below). This will set the Authorization header for ALL requests from this grid.

<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 by adding a <zg-param> element and adding a header attribute 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 requests from this grid.

<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 so you don't expose the API key to the client. You can use the following glitch example as a way to abstract an API key away.