ZingGrid and HTML Templates

Some ZingGrid features generate complex markup structures based on a smaller set of configuration or control items set by the user. In these use cases, you are providing a template similar to a native HTML <template> tag. In fact, this is what happens in the background; ZingGrid takes the user-templating code and applies it to a <template>. ZingGrid then renders the target grid markup for you from this template.

Take <zg-column> for example. When you define a custom render template for it, you are providing ZingGrid with an HTML template to use:

<zing-grid data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'>
  <zg-colgroup>
    <zg-column index="firstName,lastName" header="Name">
      Name: <strong>[[index.firstName]] [[index.lastName]]</strong>
    </zg-column>
  </zg-colgroup>
</zing-grid>

This is the same as adding it as an HTML template:

<zing-grid data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'>
  <zg-colgroup>
    <zg-column index="firstName,lastName" header="Name">
      <template>
        Name: <strong>[[index.firstName]] [[index.lastName]]</strong>
      </template>
    </zg-column>
  </zg-colgroup>
</zing-grid>

ZingGrid interprets the <zg-column> template code and uses it to override the normal <zg-cell> automatically.

External Templates

Defining numerous templates for a complex grid design or reusing the same template on multiple grids can become cumbersome. Instead, you can point to an external template to use:

<zing-grid data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'> 
  <zg-caption>External Template<zg-caption>
  <zg-colgroup> 
    <zg-column index="firstName,lastName" header="Name" renderer-template="colTemplate"></zg-column>
  </zg-colgroup>
</zing-grid>

<template id="colTemplate">
  Name: <strong>[[index.firstName]] [[index.lastName]]</strong>
</template>