Customizing Your Grid Using <zg-param>

The <zg-param> element is arguably one of the most useful in ZingGrid. Different <zg-param> configurations automatically set your grid up with less markup for you to write! You can refer to the zg-param page for a full list of the available options and a description of each. In this guide, you will be presented with what we think are the most useful applications of using <zg-param>.

Basics

<zg-param> is a non-visual element used to pass the configuration options for the <zg-data> element more cleanly via name-value pairs. The element is not required, though it is preferred, as everything set within a <zg-param> element can also be set directly on <zg-data> via the config attribute (developers should note this when setting complex values for the value attribute to use JSON encoded values). As a non-visual element, CSS styling does not apply to <zg-param>.

CRUD actions

The <zg-param> element can be used in a CRUD grid to configure custom options. There are a number of ways to do this. The first includes using the following <zg-param> name attribute values: createOptions, readOptions, updateOptions, and deleteOptions. After setting the name attribute to one of those values, you can set the value attribute to an object with different configurations for the HTTP requests. See the below demo for these <zg-param>s in action:

Another way you can overwrite CRUD functionality is using the createMethod, readMethod, updateRowMethod, updateCellMethod, and deleteMethod <zg-param>s. These allow you to explicitly set the HTTP method used for each of the CRUD requests.

You can also add headers to your HTTP requests using the headers <zg-param>. This is useful for sending authorization tokens on user-restricted grids that require authorization.

These are just a few of the examples for using <zg-param> to edit CRUD functionality. Refer to the zg-param page for a full list of parameters, including demos for each.

Grid Features

Some grid features can be toggled with <zg-param> values. Below are a few examples, but again, refer to the zg-param page for a full list.

Searching

Scrolling and Paging

To have the grid only load the data that is currently visible, use the loadByScroll <zg-param>.

Similarly, to have the grid only load data one page at a time, use the loadByPage parameter.

Endpoint Adapters

Adapters allow you to set multiple <zg-param> tags using just one actual element in your markup. This works by registering an adapter using the registerAdapter() method, which will list the name and value attributes for each <zg-param>. Then, you can set a single <zg-data> element with the adapter attribute set to the title of the adapter you register.

HTML before registerAdapter()

<zing-grid editor caption="Movies" page-size="10" infinite height="100px">
  <zg-data src="https://zinggrid-examples.firebaseio.com/movies/">
    <zg-param name="startAtKey" value="startAt"></zg-param>
    <zg-param name="limitToKey" value="limitToFirst"></zg-param>
    <zg-param name="sortByKey" value="orderBy"></zg-param>
    <zg-param name="searchKey" value="equalTo"></zg-param>
    <zg-param name="startAtValue" value="true"></zg-param>
    <zg-param name="addValueQuotes" value="true"></zg-param>
    <zg-param name="sortBy" value="title"></zg-param>
  </zg-data>
</zing-grid>

HTML after registerAdapter()

<zing-grid editor caption="Movies" page-size="10" infinite height="100px">
  <zg-data src="https://zinggrid-examples.firebaseio.com/movies/" adapter="myCustomAdapter"></zg-data>
</zing-grid>

JavaScript

const adapterOptions = {
  limitToKey: 'limitToFirst',
  startAtKey: 'startAt',
  sortByKey: 'orderBy',
  startAtValue: true,
  sortBy: '"title"',
};

ZingGrid.registerAdapter('myCustomAdapter', adapterOptions);

registerAdapter() Grid

Here is a complete grid which calls the registerAdapter() method:

For a full guide and a list of our preset adapters, refer to our adapters page.