更多演示

Question

我目前正在使用Angular 2中的Kendo UI Grid，我需要根据dataItem值将背景颜色应用于单元格。我尝试使用Kendo Grid Column模板（参见下面的代码片段），但它没有用该颜色填充整个单元格（参见附件截图）。任何帮助将不胜感激。此处还有plunker示例链接 - http://plnkr.co/edit/hBXuPWO325XYYlDVehaI?p=preview。

Screenshot

            <kendo-grid-column field="UnitPrice" title="Price" width="80">
            <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                <tbody class="{{dataItem.UnitPrice < 10 ? 'container-fluid bg-success' : 'container-fluid bg-warning'}}">{{dataItem.UnitPrice}}</tbody>
            </ng-template>  
        </kendo-grid-column>

Answer 1

@Sai，@Parvez：这是一种针对多列突出显示整个列的可能解决方案。

HTML：

<kendo-grid-column field="Code" title="Code" width="30" class="no-padding">
          <ng-template kendoGridCellTemplate let-dataItem>
            <span class="whole-cell" [style.backgroundColor]="colorCode(dataItem.IsDirtyCode)">
            {{dataItem.Code}}</span>
          </ng-template>
</kendo-grid-column>

CSS：

    .k-grid .no-padding {
      padding: 0;
    }
     .whole-cell {
       display: block;
       padding: 11px 16px; /* depends on theme you need to increase the 
padding height and width so that it will cover the entire cell size rather than only a small part */
     }

TS：

public colorCode(item: boolean): SafeStyle {
    let result;

    switch (item) {
     case true :
       result = '#FFBA80';
       break;
     default:
       result = 'transparent';
       break;
    }

    return this.sanitizer.bypassSecurityTrustStyle(result);
  }

重要提示：

在TS文件中将encapsulation: ViewEncapsulation.None设为组件级，这样它就不会产生样式。

添加导入语句：

 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { RowClassArgs } from '@progress/kendo-angular-grid';

注入DomSanitizer：

 constructor(private sanitizer: DomSanitizer) {}

这里是单元格多种样式所需的一切。对于更多列，只需在该列中添加ng-template，然后调用colorCode（）方法并传递要对其进行检查的dataItem。

请参阅此article，以获取更多信息。

希望它能回答您的问题！

Answer 2

有可能，在这里我已经修改了您的代码以使其正常工作。

@Component({
    selector: 'my-app',
    encapsulation: ViewEncapsulation.None
    template: `
        <style>
           .green .cellStyle{background-color:#0f0;}
           .red .cellStyle{background-color:#f00;}
        </style>
        <kendo-grid [data]="gridData" [height]="410" [rowClass]="rowCallback">
            <kendo-grid-column field="ProductID" title="ID" width="40">
            </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Name" width="250">
            </kendo-grid-column>
            <kendo-grid-column field="Category.CategoryName" title="Category">
            </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" title="Price" width="80" [class]="{'cellStyle':true}">
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                    <div class="{{dataItem.UnitPrice < 10 ? 'm-0 p-0 bg-success' : 'm-0 p-0 bg-warning'}}">{{dataItem.UnitPrice}}</div>
                </ng-template>  
            </kendo-grid-column>
            <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
            </kendo-grid-column>
            <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
                <ng-template kendoGridCellTemplate let-dataItem>
                    <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
                </ng-template>
            </kendo-grid-column>
        </kendo-grid>
    `
})
export class AppComponent {
    private gridData: any[] = products;
    private rowCallback = (context: RowClassArgs) => {
       return context.dataItem.UnitPrice < 10 ? 'green' : 'red';  
      }
    }


}

在这里the人：http://plnkr.co/edit/h6OcGBL8AkzzpuAbcqYZ?p=preview

有关更详尽的答案，请也查看我在这篇文章中的答案以获取演示：

如何根据数据项值自定义Angular 2 Kendo Grid行和单元格

2 个答案:

更多演示