Question

我有一个Kendo Grid，其值根据后调用填充。如果其中一列的值为“REGISTERED”，我需要将整行显示为灰色。

我们有办法实现这个目标吗？

这是我的代码：

$("#grid").kendoGrid({
  columns: [
    { field: "name", title: "Release Name" },
    { field: "number", title: "Number" },
    { field: "status", title: "Registration Status" }
  ],
  dataSource: [
    { name: "Jane Doe", number: "50", status: "REGISTERED" },
    { name: "John Doe", number: "60", status: "NOT REGISTERED" }
  ]
});

Answer 1

如果要更改kendo网格元素的样式，则应在dataBound event上执行此操作。当触发此事件时，将呈现所有视图元素，并且您将能够基于dataItem的uid检索特定的DOM元素。

$("#YourGrid").kendoGrid({
    dataBound: function() {
        $.each($("#YourGrid").data("kendoGrid").dataSource.view(), function (index, viewDataItem) {
            var row = $("#YourGrid").find("tbody>tr[data-uid='" + viewDataItem.uid + "']");
            if (viewDataItem.status == "REGISTERED") {
                row.css("background-color", "red"); //Use row.find("td") if you want to set the style at the cell level
            } else {
                row.css("background-color", "");
            }
        });
    }
});

Answer 2

只需查看此小提琴链接

我使用kendo的dataSource

创建了演示网格示例

Fiddle Link For Kendo Grid Row Background Color

//this.Movie1.stop(); // it doesn't work 
//exportRoot.Movie1.stop(); // it doesn't work 
this.Movie1.addEventListener('click', alertpopup);
var i = 0;
function alertpopup(){
    i++;
    if(i==2) i = 0;
    exportRoot.Movie1.gotoAndStop(i);                       
}

在Kendo Grid中排成一排

2 个答案: