Server Features

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


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=""></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>

The API only returns ten results at a time, so you must implement server paging to properly connect to this endpoint.

Server Endpoint Connected Grid

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



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:



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:



Use the searchKey param to enable server search, like so:

<zg-param name="searchKey" value="search"></zg-param>

Server Search Enabled Grid

Here is a complete grid with server search enabled:


Related Resources

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

[features: server features]