且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何根据剑道网格中的特定列条件更改行的颜色

更新时间:2021-11-08 00:58:06

首先:您必须将[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