Как получить функцию привязки данных к сетке Кендо

Question

Я пытаюсь настроить стиль ячеек сетки в зависимости от условий, удовлетворяющих значениям ячеек. В документации кендо я нашел example, как это сделать. Этот пример работает с расширением сетки с помощью функции привязки данных. Я скорректировал код на странице Dojo для моих нужд и там он отлично работает. Но когда я пытаюсь расширить свою сетку с помощью функции привязки данных, я не могу найти правильный синтаксис/положение, чтобы вставить эту функцию.

Это моя с привязкой к данным функция:

   dataBound: function(e) { 
       // get the index of the cell 
       var columns = e.sender.columns; 
       var columnIndex = this.wrapper.find(".k-grid-header [data-field=" + "Frachtkonsens" + "]").index(); 

       // iterate the table rows and apply custom row and cell styling 
       var rows = e.sender.tbody.children(); 
       for (var j = 0; j < rows.length; j++) { 
        var row = $(rows[j]); 
        var dataItem = e.sender.dataItem(row); 

        var value = dataItem.get("Frachtkonsens"); 
        var max = dataItem.get("Mengenschwelle"); 
        //var min = dataItem.get("Min"); 


        var cell = row.children().eq(columnIndex); 
        cell.addClass(checkValue(value, max)); 
       } 
      } 

Это JavaScript:

<script type="text/javascript"> 

    function checkvalue(value, max) { 
     if (max > 0) { 
      if (value > max){ 
       return "critical"; 
      } 
     } 
    } 

    $(function() { 

     var konsenseGrid = $("#parameters-grid").kendoGrid({ 
      dataSource: someData, 
      scrollable: true, 
      sortable: true, 
      pageable: { refresh: true }, 
      selectable: "row", 
      resizable: true, 
      height: 430, 
      editable: true, 
      toolbar: [{ text: "", template: kendo.template($("#add-parameter-template").html()) }, { text: "", template: kendo.template($("#update-parameter-template").html()) }], 
      columns: [ 
       { 
        field: "Parameter", 
        title: "Parameter", 
        width: "160px" 
       }, 
       { 
        field: "Max", 
        title: "Max", 
        width: "55px", 
        format: "{0:n}", 
        editor: numberEditor 

       }, 
       { 
        field: "Frachtkonsens", 
        title: "Frachtkonsens", 
        width: "70px", 
        format: "{0:n1}", 
        editor: numberEditor 
       }, 
       { 
        command: 
        ["edit", "destroy"], 
        title: "&nbsp;", 
        width: "200px" 
       } 

     ], 
     }); 

    }); 

И это стиль, который я хочу, чтобы применить к клеткам, которые удовлетворяют условиям:

.critical { 
    font-weight: bold; 
    color: #f00; 
} 

Если кто-то может мне помочь! С уважением Manu

Answer 1

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

$(function() { 
    var konsenseGrid = $("#parameters-grid").kendoGrid({ 
     dataSource: { 
      data: [{'Parameter': 'a', Max: 5, Frachtkonsens: 10, Mengenschwelle: 5}, {'Parameter': 'b', Max: 1, Frachtkonsens: 1, Mengenschwelle: 3}] 
     }, 
     dataBound: function(e) { 
      // get the index of the cell 
      var columns = e.sender.columns; 
      var columnIndex = this.wrapper.find(".k-grid-header [data-field='Frachtkonsens']").index(); 

      // iterate the table rows and apply custom row and cell styling 
      var rows = e.sender.tbody.children(); 
      for (var j = 0; j < rows.length; j++) { 
       var row = $(rows[j]); 
       var dataItem = e.sender.dataItem(row); 

       var value = dataItem.get("Frachtkonsens"); 
       var max = dataItem.get("Mengenschwelle"); 
       //var min = dataItem.get("Min"); 


       var cell = row.children().eq(columnIndex); 
       cell.addClass(checkValue(value, max)); 
      } 
     }, 
     scrollable: true, 
... 

Example