如何將基於標準的樣式應用到Kendo UI網格？

Question

我正在使用Kendo UI;特別是與網格組件。有沒有人知道一種技術可以讓我根據行中的數據來設置行的樣式？

例如，如果其中一列的值是負值，我會用紅色文本設置該行的樣式。

我對如何自己做一些想法，但我希望有人已經解決了這個問題。

Answer 1

下面的代碼是最終解決方案：

var ApplyTestStyles = function() { 
    //Get a reference to our data grid 
    var grid = $("#grid").data("kendoGrid"); 

    //Get grid data 
    var gridData = grid._data; 

    //iterate the data items based on data length 
    for (var i = 0; i < gridData.length; i++) { 

     //grab the current grid data item 
     var current = gridData[i]; 

     //the css selector used to find the given data items html table row 
     var rowSelector = ">tr:nth-child(" + (i + 1) + ")"; 

     //Grab a reference to the corrosponding data row 
     var row = grid.tbody.find(rowSelector); 

     //apply criteria based styles 
     //TODO: refactor this logic into criteria based style providersf 
     if (current.Nav <= 670) { 
      row.addClass("Negative"); 
     } 
     else if (current.Nav >= 670) { 
      row.addClass("Positive"); 
     } 

    } 

}; 

我結束了遍歷數據後頁面加載，然後應用特定的樣式。

Answer 2

只需用JavaScript閱讀值。然後取決於該值是否定的，零或正的，或者根本不是數字，而是設置不同的樣式。