<zg-data>

The <zg-data> tag is a web component that controls data associated to the grid. As an non-visual element, you should not apply style to this tag.

Related Web Components

• <zing-grid>
• <zg-param>
• <zg-load-mask>
• <zg-no-data>

Usage

A <zg-data> tag will always be implicitly used by the grid; when using top level data and src tags, a <zg-data> is created behind the scenes.

<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json">
</zing-grid>

The following markup is the same as the HTML above:

<zing-grid>
  <zg-data src="https://cdn.zinggrid.com/datasets/user-roles.json"></zg-data>
</zing-grid>

If you have a more complex use case that requires headers and arguments to be passed to the server containing your src, then <zg-data> and <zg-param>(s) will be used. <zg-data>should be employed and various configuration values set via the options attribute, or more appropriately, via <zg-param> tags nested within the tag.

<zing-grid 
    pager
    page-size="5"
    layout="row"
    layout-controls="disabled"
    viewport-stop>
    <zg-caption>
      ZingGrid Star Wars Server Paging
      <span class="button" id="reloadBtn">Reload Demo</span>
    </zg-caption>
    <zg-data>
      <!-- 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>
      
      <!-- if loadByPage is set to true it will go to the 
        server for each new page of data -->
      <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>
      
    </zg-data>
    <zg-colgroup>
      <zg-column index="name"></zg-column>
      <zg-column index="height"></zg-column>
      <zg-column index="mass"></zg-column>
      <zg-column index="hair_color"></zg-column>
      <zg-column index="eye_color"></zg-column>
      <zg-column index="skin_color"></zg-column>
    </zg-colgroup>
  </zing-grid>

Attributes

There are a couple attributes for <zg-data> that are used to create adapters, parameters and arguments when fetching your data source.

Example Usage

<zing-grid>
  <zg-data src="https://cdn.zinggrid.com/datasets/user-roles.json"></zg-data>
</zing-grid>

CSS Variables

There are no CSS variables available for the <zg-data> web component.

CSS Selector

As an non-visual element, you should not apply style to this tag.

Slots

<zg-data> contains placeholders to allow adding markup inside the component.

<zg-data><zg-param></zg-param></zg-data>

Below is a list of all the associated ZGData slots. Check out the full list of slots.