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:

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.

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:

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>