title: Kendo treelist - trying to set a column template
body: <p>I'm working with a Kendo treelist widget, and disappointed to see there's no <code>rowTemplate</code> option as there is on the Kendo grid.</p>
  
  <p>I see a <code>columnTemplate</code> option (i.e. <a href="http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#configuration-columns.template" rel="nofollow">http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#configuration-columns.template</a> ), but this will affect the entire column. </p>
  
  <p>However, I need to drill into each cell value and set a css color property based on a ratio ( i.e. If <code>value/benchmark &lt; .2</code>, assign <code>&lt;span style='color:red;'&gt;</code> , but my color value is dynamic.</p>
  
  <p>There's a <code>dataBound:</code> and <code>dataBinding:</code> event on the  <code>treelist</code>, but I'm still trying to figure out how to intercept each cell value and set the color once I've done my calculation.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var treeOptions = {
  dataSource: ds,
  columns: colDefs,
  selectable: true,
  scrollable: true,
  resizable: true,
  reorderable: true,
  height: 320,
  change: function (e) {
      // push selected dataItem
      var selectedRow = this.select();
      var row = this.dataItem(selectedRow);                    
  },
  dataBound: function (e) {
      console.log("dataBinding");
      var ds = e.sender.dataSource.data();
      var rows = e.sender.table.find("tr");
  }
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>and this is where I'm building out the `colDefs' object (column definitions):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function parseHeatMapColumns(data, dimId) {
  // Creates the Column Headers of the heatmap treelist.
  // typeId=0 is 1st Dimension; typeId=1 is 2nd Dimension 
  
  var column = [];
  column.push({
  "field": "field0",
  "title": "Dimension",
  headerAttributes: { style: "font-weight:" + 'bold' + ";" },
  attributes : { style: "font-weight: bold;" }
  });
  
  var colIdx = 1;     // start at column 1 to build col headers for the 2nd dimension grouping
  _.each(data, function (item) {
  if (item.typeId == dimId) {
      // Dimension values are duplicated, so push unique values (i.e. trade types may have dupes, whereas a BkgLocation may not). 
      var found = _.find(column, { field0: item.field0 }); 
      if (found == undefined) {
   column.push({          
       field: "field2",
       title: item.field0,
       headerAttributes: {
    style: "font-weight:" + 'bold'
       }
       ,template: "&lt;span style='color:red;'&gt;#: field2 #&lt;/span&gt;"      
   });  
   colIdx++;
      }
  }
  });
  
  return column;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>**** UPDATE ****
  In order to embed some logic within the <code>template</code> :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function configureHeatMapColumnDefs(jsonData, cols, model) {
      var colDef = '';
      var dimId = 0;
      var colorProp;
  
      var columns = kendoGridService.parseHeatMapColumns(jsonData, dimId);
  
      // iterate columns and set color property; NB: columns[0] is the left-most "Dimension" column, so we start from i=1.
      for (var i = 1; i &lt;= columns.length-1; i++) {
   columns[i]['template'] = function (data) {
       var color = 'black';
       if (data.field2 &lt; 1000) {
    color = 'red';
       }
       else if (data.field2 &lt; 5000) {
    color = 'green';
       }                    
       return "&lt;span style='color:" + color + ";'&gt;" + data.field2 + "&lt;/span&gt;";
   };
  
      }
      return columns;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Advice is appreciated.
  Thanks,
  Bob</p>