Kendo UI grid rowTemplate - calling a function to affect the css of td cells -

my kendo ui grid dynamic, columns can defined field0, field1 through field[n] ; not know number of fields ahead of time.

i use rowtemplate in order apply css background-color <td> cell.

further details:

each cell value must sent ratio function (i.e. financial risk exposure divided benchmark value). result of ratio determines background-color property cell).

i'm starting code snippet, , working on plunker: http://plnkr.co/edit/waejzz8xgenupsa3rvma?p=preview

var gridoptions = {  	datasource: ds,  	pageable: true,  	columnmenu: true,  	resizable: true,  	columns: heatmapcoldefs ,  	databound: function (e) {  	}  	, rowtemplate: function (row) {  		// how determine td cell value , apply background-color dynamically ???  	}  };           

your advice appreciated...

bob

by looking @ first row of data datasource, can iterate properties fields , build dynamically columns , row template of grid , model fields of datasource:

var colsfieldsrowtemplate = {}   function getrowtemplate(){     var obj = {};     var columns= [];     var fields = {};       var t = '<tr data-uid="#= uid #">';     //use first row of data fields     var row = mydata[0];     (var key in row) {       if (key == 'field0'){         fields[key] = { type: "string" };         columns.push({"field": key});         t += '<td >#= ' + key  + '  #</td>';       } else if (key.indexof("field") > -1){         fields[key] = { type: "number" };         columns.push({"field": key});         t += '<td style="background-color: #=' + key + ' > 3000000 ? "red" : "green" #;">#= ' + key  + '  #</td>';       }     }     t += '</tr>';      colsfieldsrowtemplate.rowtemplate = t;     colsfieldsrowtemplate.cols = columns;     colsfieldsrowtemplate.fields = fields;     console.log(colsfieldsrowtemplate);     return colsfieldsrowtemplate;   }   getrowtemplate();    vm.usergridoptions = {             selectable: true,             sortable: true,             pageable: true,                    rowtemplate: colsfieldsrowtemplate.rowtemplate,             columns: colsfieldsrowtemplate.cols,             editable: {                 mode: "popup"                 //template: kendo.template($("#editortemplate").html())   // loaded in index.html (alt. kendo.template('<div>..</div>') )                             },             toolbar: ["create"]   };     // define data source user kris   vm.gridds = new kendo.data.datasource({  // customized user kri grid; pull server or localstorage                   pagesize: 10,       transport: {           read: function(options){             options.success(mydata)           }       },                   schema: {           model: {               id: "id",               fields: colsfieldsrowtemplate.fields           }       }               }); 

updated plunker