UI GRID - Custom Cell Templates Code Separation

Question

I am trying to customize the cells using cellTemplates in UI-GRID. For this, I am defining templates in .js file, like this :

var template1 = '<div class="div1">{{COL_FIELD}}</div>';

var template2 = '<div class="div2">{{COL_FIELD}}</div>';

var template3 = '<div class="div3">{{COL_FIELD}}</div>';

I want to separate the HTML codes from .js file. Is there a way to define these templates separately in some .html file and using them in .js file. ?

Please Help.

Answer 1

You can use cellTemplate differents ways:

var columnDefs = [
  { field: 'name', cellTemplate: 'name-template.html' },
  { field: 'name', cellTemplate: 'myTemplateId' },
  { field: 'name', cellTemplate: $.get('url-to-your-template.html') }
];

Your template can contain:

<div class="ui-grid-cell-contents"><a href="mailto:{{ COL_FIELD }}">Send E-Mail</a></div>

Answer 2

You can achieve it by coding as mentioned below

<script type = "text/ng-template" id = "myTemplate.html">
  <div class="ui-grid-cell-contents"><a href="mailto:{{ COL_FIELD }}">Send E-Mail</a></div>
</script>

and then in your column definition provide the id mentioned for script tag in cellTemplate

var columnDefs = [
{ field: 'name', cellTemplate: 'myTemplate.html' }  
];