如何将基于标准的样式应用于Kendo UI网格?

时间:2012-05-11 15:41:51

标签: javascript css kendo-ui

我正在使用Kendo UI;特别是与网格组件。是否有人知道一种技术可以让我根据行中的数据设置行的样式?

例如,如果其中一列的值为负,我会用红色文本设置该行的样式。

我对自己如何做有一些想法,但我希望有人已经解决了这个问题。

2 个答案:

答案 0 :(得分:0)

只需用JavaScript读取值即可。然后根据值是负数,零还是正数,或者根本不是数字,设置不同的样式。

答案 1 :(得分:0)

以下代码是最终解决方案:

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

    }

};

我最终迭代数据帖子页面加载,然后应用特定样式。