剣道グリッドでデータバインド機能を使用する方法

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

誰かが私を助けてくれたら！ よろしくマヌー

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