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

Posted

技术标签:

【中文标题】如何根据剑道网格中的特定列条件更改行的颜色以获取角度【英文标题】:How to change color of row based on particular column condition in kendo grid for angular 【发布时间】:2019-06-30 09:29:27 【问题描述】:

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

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

【问题讨论】:

请帮帮我 更多演示Formatting grid's row in Kendo UI for Angular 2 grid 演示:***.com/questions/42842858/… 【参考方案1】:

首先:您必须将[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命名类,否则您将无法获得所需的结果

【讨论】:

【参考方案2】:

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

DOCS + DEMO

【讨论】:

【参考方案3】:

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

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

【讨论】:

谢谢你的回答。实际上我使用的是剑道网格所以没有 标签

以上是关于如何根据剑道网格中的特定列条件更改行的颜色以获取角度的主要内容,如果未能解决你的问题,请参考以下文章

如果特定值在行内,则更改行中的背景颜色

如何使用列设置动态创建角剑道网格列?

根据列中的文本更改行颜色

如何根据特定字段的值更改行的颜色?

如何使用 jquery 函数编辑剑道网格中的特定绑定列

如何制作可编辑的假剑道网格特定列?