Docs

CRUD Basics

ZingGrid has default behavior for CRUD grids. There are expected inputs and outputs for each CRUD action. You can of course extend and override this default behavior.

Enable CRUD

Enabling a CRUD grid at the simplest level is adding two attributes. src to point to a endpoint and editor-controls to let the grid know you want all CRUD actions enabled. ZingGrid will then automatically set up the GET, POST, PATCH and DELETE requests to your endpoint when defining these two attributes. You can of course override this default behavior.

<zing-grid
  src="https://jsonplaceholder.typicode.com/comments"
  editor-controls>
</zing-grid>

The full JSON for the example is below

<zing-grid
  src="https://jsonplaceholder.typicode.com/comments"
  caption="CRUD Endpoint"
  editor-controls
  pager
  page-size="5"
  layout="row">
</zing-grid>

If you want to know more about the above src attribute and do not know what JSON server is, you can read more about how we integrate with them directly on our landing page.

Top

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 actions you can use to adjust all actions against the initial, and subsequent fetches from the grid. You can read more about available option values here.

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

Here is a list of available values for each option:

{
  // 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:

<!-- basic option with static body -->
<zg-param name="readOptions" value='{"body": {"user_id":1}}'></zg-param>
<zg-param name="createOptions" value='{"body": {"user_id":1}}'></zg-param>
<zg-param name="updateOptions" value='{"body": {"user_id":1}}'></zg-param>
<zg-param name="deleteOptions" value='{"body": {"user_id":1}}'></zg-param>

The body value can also be a function:

<!-- basic options with function reference for body -->
<zg-param name="readOptions" value='{"body": "_fncStringReference"}'></zg-param>
<zg-param name="createOptions" value='{"body": "_fncStringReference"}'></zg-param>
<zg-param name="updateOptions" value='{"body": "_fncStringReference"}'></zg-param>
<zg-param name="deleteOptions" value='{"body": "_fncStringReference"}'></zg-param>

Where the function returns the following:

// 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: ''
  }
}