<!-- 
/*
Copyright 2017 apHarmony

This file is part of jsHarmony.

jsHarmony is free software: you can redistribute it and/or modify
it under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

jsHarmony is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public License
along with this package.  If not, see <http://www.gnu.org/licenses/>.
*/
-->
<script type="text/x-tutorial-info">
{
  "ID": "grids_custom_templates",
  "Title": "Custom Grid Templates",
  "Menu": ["Models","Grids"],
  "Code": [
    "/models/GridCustom_Cust_Listing.json",
    "/models/GridCustom_Cust_Listing.ejs",
    "/models/GridCustom_Cust_Listing.css"
  ],
  "Demo": "jsHarmonyTutorials/GridCustom_Cust_Listing"
}
</script>

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:

<pre>
{
  "templates": {
    "grid": "TEMPLATE_SELECTOR"
  }
}
</pre>
For example:
<pre>
{
  "templates": {
    "grid": ".xgrid_Cust_Listing_template"
  }
}
</pre>
Next, the HTML/EJS template needs to be defined.  The EJS uses &lt;% ... %&gt; escape tags for the initial render pass, and &lt;%% ... %%&gt; for the data render pass.  The HTML/EJS should be defined in a MODELID.ejs file, in the same folder as MODELID.json:
<pre>
<div class="xelem&lt;%=model.class%&gt; xgrid_Cust_Listing_placeholder"></div>
<script class="xgrid_Cust_Listing_template" type="text/x-ejs-template" data-target=".xgrid_Cust_Listing_placeholder">
  &lt;%% _.each(data, function(row){  %%&gt;
    <div>&lt;%%=row.cust_name%%&gt;</div>
  &lt;%% }); %%&gt;
</script>
</pre>
There are two components to the Custom Grid Template, a "placeholder" and the "template".<br/>
<br/>
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.<br/>
<br/>
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.<br/>
<br/>
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.<br/>
<br/>
The template is rendered with the following EJS variables:
<pre>
{
  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
}
</pre>