Kendo treelist - попытка установить шаблон столбца

Question

Я работаю с виджетами из древовидного списка Kendo и разочарован, увидев, что нет опции rowTemplate, как есть в сетке Kendo.

Я вижу вариант columnTemplate (т. Е. http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#configuration-columns.template), но это повлияет на весь столбец.

Однако, мне нужно просверлить в каждое значение ячейки и установить свойство CSS цвета на основе соотношения (т.е. если value/benchmark < .2 назначьте <span style='color:red;'>, но мой цвет значение является динамическим.

Там в dataBound: и dataBinding: события treelist, но я все еще пытаюсь выяснить, как перехватить каждое значение ячейки и установите цвет, как только я сделал свой расчет.

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"); 
 
} 
 
};

и это, где я строю из объекта `COLDEFS' (определений столбцов):

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) { 
 
\t column.push({   
 
\t  field: "field2", 
 
\t  title: item.field0, 
 
\t  headerAttributes: { 
 
\t \t style: "font-weight:" + 'bold' 
 
\t  } 
 
\t  ,template: "<span style='color:red;'>#: field2 #</span>"  
 
\t }); 
 
\t colIdx++; 
 
    } 
 
} 
 
}); 
 

 
return column; 
 
}

**** **** UPDATE Для того, чтобы вставлять некоторые логика в template:

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 <= columns.length-1; i++) { 
 
\t columns[i]['template'] = function (data) { 
 
\t  var color = 'black'; 
 
\t  if (data.field2 < 1000) { 
 
\t \t color = 'red'; 
 
\t  } 
 
\t  else if (data.field2 < 5000) { 
 
\t \t color = 'green'; 
 
\t  }      
 
\t  return "<span style='color:" + color + ";'>" + data.field2 + "</span>"; 
 
\t }; 
 

 
    } 
 
    return columns; 
 
}

Совет приветствуется. Спасибо, Bob

Answer 1

В событии с привязкой к файлам вы можете перебирать строки. Для каждой строки вы можете получить DataItem, связанные с ним, используя метод DataItem() (http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-dataItem)

После того как вы DataItem, рассчитать свой рацион и, если строка соответствует критериям цветов, изменить ячейки DOM элемент:

dataBound: function (e) { 
    var that = e.sender; 
    var rows = e.sender.table.find("tr"); 
    rows.each(function(idx, row){ 
    var dataItem = that.dataItem(row); 
    var ageCell = $(row).find("td").eq(2); 
    if (dataItem.Age > 30) { 
     //mark in red 
     var ageText = ageCell.text(); 
     ageCell.html('<span style="color:red;">' + ageText + '</span>');        
    } 
} 

DEMO

UPDATE: вы также можете сделать это с шаблон:

   $("#treelist").kendoTreeList({ 
        dataSource: dataSource, 
        height: 540, 
        selectable: true, 
        columns: [ 
         { field: "Position"}, 
         { field: "Name" }, 
         { field: "Age", 
         template: "# if (data.Age > 30 ) { #<span style='color:red;'> #= data.Age # </span> #}else{# #= data.Age # #}#" 
         } 
        ], 

       }); 

DEMO