Kendo树形列表-尝试设置列模板

Question

I'm working with a Kendo treelist widget, and disappointed to see there's no rowTemplate option as there is on the Kendo grid.

I see a columnTemplate option (ie http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#configuration-columns.template ), but this will affect the entire column.

However, I need to drill into each cell value and set a css color property based on a ratio ( ie If value/benchmark < .2 , assign <span style='color:red;'> , but my color value is dynamic.

There's a dataBound: and dataBinding: event on the treelist , but I'm still trying to figure out how to intercept each cell value and set the color once I've done my calculation.

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

and this is where I'm building out the `colDefs' object (column definitions):

 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 (ie 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: "<span style='color:red;'>#: field2 #</span>" }); colIdx++; } } }); return column; } 

**** UPDATE **** In order to embed some logic within the 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++) { columns[i]['template'] = function (data) { var color = 'black'; if (data.field2 < 1000) { color = 'red'; } else if (data.field2 < 5000) { color = 'green'; } return "<span style='color:" + color + ";'>" + data.field2 + "</span>"; }; } return columns; } 

Advice is appreciated. Thanks, Bob

Answer 1

In the databound event you can iterate through the rows. For each row you can get the dataItem associated with it using the dataitem() method ( http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-dataItem )

Once you have the dataitem, calculate your ration and if the row meets the criteria for color, change the cell DOM element:

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: you can also do this with a template:

                $("#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