7

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

<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>
4

3 回答 3

7

第一:你必须添加[rowClass]到你的网格

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

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

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

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

@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,否则您将无法获得所需的结果

于 2019-09-17T14:39:25.357 回答
1

使用rowClass回调为数据项满足某些自定义条件的所有行提供自定义类,然后通过 CSS 设置它们的样式,例如:

文档 + 演示

于 2019-02-09T18:56:09.513 回答
-1

如果满足上述条件,这将用红色背景颜色标记行

<tr *ngFor="let myObject of myArray;" [ngStyle]="{'background-color':myObj.completedIn>24 ? 'red' : '' }">
   <!-- your other code -->
</tr>

于 2019-02-06T12:37:04.430 回答