Clever Geek Handbook

UI GRID - Code Splitting Custom Cellular Templates

I am trying to customize cells using cellTemplates in UI-GRID. To do this, I define templates in the .js file, for example:

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 HTML codes from a .js file. Is there a way to define these templates separately in some .html file and use them in the .js file.

Please, help.

+3


source to share


2 answers


You can use cellTemplate

different 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>
+5


source


You can achieve this by coding like 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 the column definition give the id given for the script tag in the cellTemplate

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


source






More articles:


All Articles