User Content Model

Similar to native HTML elements, ZingGrid follows a strict content model. It defines which tags are allowed to be placed inside of each other. The following example shows the basic structure of the content model:

<zing-grid>

  <zg-data>
    <!-- may have a variety of defined parameters -->
    <zg-param></zg-param>
  </zg-data>

  <zg-header>
    <zg-caption></zg-caption>
    <zg-source></zg-source>
  </zg-header>

  <zg-colgroup>
    <!-- Define and format N number of columns of data -->
    <zg-column></zg-column>
  </zg-colgroup>

  <zg-card></zg-card>

  <zg-dialog></zg-dialog>

  <zg-pager></zg-pager>

  <zg-footer>
    <zg-caption></zg-caption>
    <zg-source></zg-source>
  </zg-footer>

</zing-grid>

Not all of these elements are required; you are free to construct your grids using the features you need. If required elements are omitted, ZingGrid will attempt to add them automatically to the grid on render. If elements are added incorrectly, it will attempt to correct it or add missing parent elements, where possible.

Although flexible, some elements are recommended to be added manually despite the fact they will be rendered if omitted. The best example is <zg-colgroup> with <zg-column>. You do not need to define <zg-column> elements, but if you do, you should wrap them inside <zg-colgroup> directly. This will speed up render time depending on the number of data rows the grid displays. You can see if each element is optional or not on the API Elements Usage page.

Top

< api: intro

[api: user content model]

api: generated content model >