Generated Content Model

The User Content Model below illustrates how easy it is to get a grid up-and-running by adding only a few elements and attributes. The Generated Content Model shows what is actually rendered into the DOM from those configuration settings.

The generated source is important to understand if you want to customize the styling of the grid beyond choosing a pre-built theme. See the guide on styling the grid for further information on customizing your grid's display.

<zing-grid>
  
  <!-- Grid Header (generated) -->
  <zg-header>

    <!-- Caption (user-added or generated) -->
    <zg-caption>

      <!-- Remove Selected Rows (generated) -->
      <zg-button action="removerecord"></zg-button>

      <!-- 
        Context Menu Button (generated)
        (mimics the right-click context-menu, but from a fixed location)
        (toggles the <zg-menu> Context-Menu shown below)
      -->
      <zg-button action="fixedmenu"></zg-button>

      <!-- 
        Column Menu (generated)
        (toggle per-column visibility)
      -->
      <!-- Toggle Button -->
      <zg-button action="menu"></zg-button>
      <!-- Dropdown -->
      <zg-menu>
        <zg-menuitem>
          <zg-button action="checkbox"></zg-button>
        </zg-menuitem>
      </zg-menu>
      
      <!-- Grid Search (generated) -->
      <zg-search></zg-search>

    </zg-caption>

    <!-- Source (user-added or generated) -->
    <zg-source></zg-source>

    <!-- Controls Bar (generated) -->
    <zg-control-bar>
      <!-- Select All Rows -->
      <zg-checkbox></zg-checkbox>
      <!-- Insert New Record -->
      <zg-button action="createrecord"></zg-button>
      <!-- Change Layout Mode -->
      <zg-layout-control>
        <zg-button action="layoutcard"></zg-button>
        <zg-button action="layoutrow"></zg-button>
      </zg-layout-control>
    </zg-control-bar>

  </zg-header>

  <!-- Use Inline or External Data Source (user-added) -->
  <zg-data>
    <!-- Configure Data With Parameters -->
    <zg-param></zg-param>
  </zg-data>

  <!-- Columns Group (user-added or generated) -->
  <!-- (analogous to HTML table '<colgroup>') -->
  <zg-colgroup>
    <!-- Format Column(s) (1 to N) -->
    <!-- (analogous to HTML table '<col>') -->
    <!-- Note: Not required, but if you need to customize one column, you need to specify them all -->
    <zg-column></zg-column>
  </zg-colgroup>

  <!-- Custom 'Card' Layout Template (user-added or generated) -->
  <!-- Note: Replaces the normal <zing-grid layout="card"> display -->
  <zg-card><!-- User Defined Code --></zg-card>

  <!-- Grid Data Table 'Head' (generated) -->
  <!-- (analogous to HTML table '<thead>') -->
  <zg-head>
    <zg-row>
      <!-- 'Head' Cells (1 to N) -->
      <!-- (analogous to HTML table '<th>') -->
      <zg-head-cell></zg-head-cell>
    </zg-row>
    <!-- Filter Column(s) Controls -->
    <zg-row>
      <zg-filter></zg-filter>
    </zg-row>
    <!-- Optional Aggrigation Cell (sum, average, etc.) -->
    <zg-row>
      <zg-cell></zg-cell>
    </zg-row>
  </zg-head>

  <!-- Grid Data Table 'Body' (generated) -->
  <!-- (analogous to HTML table '<tbody>') -->
  <zg-body>
    <zg-row>
      <!-- 'Body' Cells (1 to N) -->
      <!-- (analogous to HTML table '<td>') -->
      <zg-cell></zg-cell>
      <!-- <zg-card> Instance (conditional) -->
      <!-- (if user-defined <zg-card> template added, its result rendered here -->
      <zg-card></zg-card>
    </zg-row>
  </zg-body>

  <!-- Grid Data Table 'Foot' (generated) -->
  <!-- (analogous to HTML table '<tfoot>') -->
  <zg-foot>
    <!-- Optional Aggrigation Cell (sum, average, etc.) -->
    <zg-row>
      <zg-cell></zg-cell>
    </zg-row>
  </zg-foot>

  <!-- Drag-Select Multiple Cells For Action (generated) -->
  <zg-selector-mask></zg-selector-mask>
  <!-- The Currently-Selected Cell (generated) -->
  <zg-focus></zg-focus>

  <!-- The Pagination Element (user-added or generated) -->
  <!-- (Contains 'per page' dropdown, next/previous buttons, and total records data) -->
  <!-- (Location of elements controlled by slot naming) -->
  <zg-pager>
    <zg-select action="pagesize"></zg-select>
    <zg-button action="reload"></zg-button>
    <zg-button action="firstpage"></zg-button>
    <zg-button action="prevpage"></zg-button>
    <zg-text>Page</zg-text>
    <zg-input action="currpage"></zg-input>
    <zg-text>of</zg-text>
    <zg-text value="pagecount"></zg-text>
    <zg-button action="nextpage"></zg-button>
    <zg-button action="lastpage"></zg-button>
    <zg-text>Rows</zg-text>
    <zg-text value="startrow"></zg-text>
    <zg-text>-</zg-text>
    <zg-text value="endrow"></zg-text>
    <zg-text>of</zg-text>
    <zg-text value="rowcount"></zg-text>
  </zg-pager>

  <!-- Grid Footer (generated) -->
  <zg-footer>
    <!-- Caption Alternate Position (generated-only) -->
    <zg-caption></zg-caption>
    <!-- Source Alternate Position (generated-only) -->
    <zg-source></zg-source>
  </zg-footer>

  <!-- Internal Dialogs (modal overlays - generated) -->
  <!-- User-Defined Dialogs (user-added - <zg-dialog type="custom">) -->
  <zg-dialog></zg-dialog>
  
  <!-- Inline-Edit Grid Row (generated) -->
  <zg-editor-row></zg-editor-row>

  <!-- Grid Action(s) Context Menu (generated) -->
  <zg-menu>
    <!-- Contains any combination of <zg-menugroup>, <zg-menuitem>, and <zg-separator> -->
    <zg-menu-group group="insert-record-group">
      <zg-menuitem></zg-menuitem>
      <zg-menuitem></zg-menuitem>
    </zg-menu-group>
    <zg-menuitem>
      <zg-button action="cancelrecord"></zg-button>
    </zg-menuitem>
    <zg-separator action="action"></zg-separator>
  </zg-menu>

  <!-- Status Messages (generated) -->
  <zg-status></zg-status>

  <!-- Grid Loading Mask (user-added or generated) -->
  <zg-load-mask></zg-load-mask>
</zing-grid>
On This Page