如何根据剑道网格中的特定列条件更改行的颜色以获得角度 [英] How to change color of row based on particular column condition in kendo grid for angular

问题描述

我想将红色应用于已完成小时列值大于 24 的行.我该怎么做.请帮助我是 angular 的新手.

I want to apply red color to row whose completedIn hours column value is greater than 24. how can i do it. please help i am new to angular.

<kendo-grid [kendoGridBinding]="gridData">
    <kendo-grid-column field="RequestNumber" title="Request No."  
width="110" >
    </kendo-grid-column>
<kendo-grid-column field="RequestNumber" title="Request No."  width="110" >
    </kendo-grid-column>
<kendo-grid-column field="Name" title="Name."  width="110" >
    </kendo-grid-column>
<kendo-grid-column field="CompletedIn" title="CompletedIn"  width="110" >
    </kendo-grid-column>
 </kendo-grid>

推荐答案

首先:你必须将 [rowClass] 添加到你的网格中

First: you have to add [rowClass] to your grid

<kend-grid [rowClass]="rowCallback">
</kendo-grid>

然后需要在组件内部添加函数并返回需要的类

then you need to add the function inside the component and return the needed class

public rowCallback(context: RowClassArgs) {
  if (context.dataItem.someProperty) {   // change this condition as you need
    return {
      passive: true
    };
  }
}  

最后你需要有一个带有你返回名称的 CSS 类，(在这种情况下 passive 但当然你可以根据需要更改它)

and last you need to have a CSS class with the name you returned,(in this case passive but of course you can change it as you want)

@Component({
  selector: "your-component",
  templateUrl: "./your.component.html",
  encapsulation: ViewEncapsulation.None,
  styles: [
    `
     .k-grid tr.passive {
        background-color: lightgray;
      }

    `
  ]
})

使用 encapsulation: ViewEncapsulation.None 并用前缀 .k-grid tr 命名类很重要 否则你会没有得到所需的结果

it is very important to use encapsulation: ViewEncapsulation.None and name the class with the prefix .k-grid tr otherwise you will not get the needed result

这篇关于如何根据剑道网格中的特定列条件更改行的颜色以获得角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！