Docs

zg-text

ZingGrid has a predefined set of attribute values to display information about the grid state. <zg-text> is a self contained webcomponent so you can display the value anywhere in the grid.

Usage

The most important tag in the library. Contains most of the attributes to turn grid features on/off. Set zing-grid:not(:defined) {display:none;} to hide <zing-grid>instances until they are ready. This stops child elements from appearing unstyled for a brief moment.

Example Usage

<zg-footer>
  <div>
    <span>Showing</span>
    <zg-text value="currpage"></zg-text>
    <span>-</span>
    <zg-text value="pagecount"></zg-text>
    <span>of</span>
    <zg-text value="pagecount"></zg-text>
    <span>rows</span>
  </div>
  <div>
    <zg-button action="prevpage"></zg-button>
    <zg-text value="currpage"></zg-text>
    <zg-button action="nextpage"></zg-button>
  </div>
</zg-footer>

Type Values

The accepted values for the type (zg-text type="") attribute.

zg-text type Values
NameDescriptionDemo
currpageDisplay the current page of the grid.
pagecountDisplay the total amount of pages in the grid.
pagesizeDisplay the current page-size of the grid.
startrowDisplay the current starting row index, of the current page, in the grid.
endrowDisplay the current end row index, of the current page, in the grid.
rowcountDisplay the total amount of rows in the grid.
On This Page