Server Features

ZingGrid has built-in parameters to connect to and query server REST endpoints.

Connecting

Use the <zg-param> tag to enable connection to a server endpoint, like so:

<!-- define the main source for the API -->
<zg-param name="src" value="https://swapi.py4e.com/api/people/"></zg-param>
<!--
  define the path in the JSON to get the array of results.
  In this case it is body.results
-->
<zg-param name="recordPath" value="results"></zg-param>

Server Endpoint Connected Grid

Here is a complete grid that is connected to a server endpoint:

Filtering

There are two types of server filtering that is supported:

1. inline
2. menu

You can choose to enable one or both filtering behaviors.

Enable server filtering through these <zg-param> attributes, like so:

<!-- Required to be enable for server filtering -->
<zg-param name="loadByPage" value="true"></zg-param>
<!-- Enables server filtering -->
<zg-param name="serverFilter" value="true"></zg-param>
<!-- Include only if enabling filter menu -->
<zg-param name="filterFunction" value="createFilterURL"></zg-param>

The <zg-param name="filterFunction"> should be included only if filter menu is enabled. The param accepts the name of a function with oFilter argument. The function is expected to return a URL query string (or object as name/pair values) to your server-side filter url.

// Builds url for filtering
function createFilterURL(oFilter) {
  // Returns a URL query string 
  return `?filter=${encodeURIComponent(JSON.stringify(oFilter))}`;
  // Or an object as name/pair value
  // return {filter: JSON.stringify(oFilter)}
};

Server Filtering (both) Enabled Grid

Here is a complete grid with server paging enabled:

Paging

Enable server paging through a couple <zg-param> attributes, like so:

<zg-param name="loadByPage" value="true"></zg-param>
<!-- define the "page" query parameter -->
<zg-param name="pageKey" value="page"></zg-param>
<!--
  Need to tell ZG how many records were returned so it knows
  how to divide up the page-size
-->
<zg-param name="countPath" value="count"></zg-param>
<!-- define the path in the result JSON to find next/prev urls -->
<zg-param name="nextPath" value="next"></zg-param>
<zg-param name="prevPath" value="previous"></zg-param>

Server Paging Enabled Grid

Here is a complete grid with server paging enabled:

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

• API Methods List
• Adding Features Guide
• <zg-param> Documentation