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:



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: