Custom Grid Templates can be used to render grid data in any layout, such as a calendar, slideshow, or list of buttons. <%-getScreenshot('jsHarmonyTutorials/GridCustom_Cust_Listing?popup=1','Custom Grid')%> First, the custom grid template needs to be defined in the model.templates.grid property:

{
  "templates": {
    "grid": "TEMPLATE_SELECTOR"
  }
}

For example:

{
  "templates": {
    "grid": ".xgrid_Cust_Listing_template"
  }
}

Next, the HTML/EJS template needs to be defined. The EJS uses <% ... %> escape tags for the initial render pass, and <%% ... %%> for the data render pass. The HTML/EJS should be defined in a MODELID.ejs file, in the same folder as MODELID.json:

There are two components to the Custom Grid Template, a "placeholder" and the "template".

The "placeholder" defines where the custom grid template will be rendered. The placeholder's content will be replaced with the result of the rendered template.

The template itself is a script tag, of type "text/x-ejs-template". It should have a "data-target" tag with the name of the target placeholder where the content will be rendered.

The template should always return an HTML element, and not a text node. Raw text should always be wrapped in a SPAN or DIV element.

The template is rendered with the following EJS variables:

{
  rowid       //The starting rowid (0 unless "Load More" is used)
  data        //The data returned from the database, an array of rows, ex: { [ "cust_id": 1, "cust_name": "First" ], [ "cust_id": 2, "cust_name": "Second" ] }
  modelid     //The current Model ID
  jsh         //The jsHarmony object
  instance    //The name of the jsHarmony instance
  xmodel      //The jsHarmony Model instance
  xejs        //XExt.ejs Helper functions
  XExt        //XExt Helper functions
  _           //Lodash Helper functions
  moment      //Moment.js Helper functions
  js          //JavaScript function wrapper - used to add modelid and the jsHarmony Helper functions into the local scope of onclick events
}