Kendo 中未涵盖 Angular 网格的模板背景

Question

在这个StackBlitz 中，我有一个带有单元格模板的用于Angular 网格的Kendo。背景颜色没有覆盖整个单元格，如何使其覆盖？请注意，如果我将 span 字体大小从 9 像素增加到 12 像素，背景会扩大，但我需要它才能使用小字体。

@Component({
   selector: 'my-app',
   encapsulation: ViewEncapsulation.None,
   styles: [`
      .k-grid .no-padding {
        padding: 0;
      }
       .whole-cell {
         display: block;
         width: 100%;
         height: 100%;
         padding: 8px 12px; /* depends on theme */
       }
   `],
   template: `
       <kendo-grid [data]="gridData">
         <kendo-grid-column field="ProductName" title="Product Name">
         </kendo-grid-column>
         <kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
         </kendo-grid-column>
         <kendo-grid-column field="code" title="Code" width="230" class="no-padding">
            <ng-template kendoGridCellTemplate let-dataItem>
              <span class="whole-cell" 
              style="font-size: 9px;"
              [style.backgroundColor]="colorCode(dataItem.code)">
                {{ dataItem.code }}
              </span>
            </ng-template>
         </kendo-grid-column>
       </kendo-grid>
   `
})
export class AppComponent {
   public gridData: any[] = products;

   constructor(private sanitizer: DomSanitizer) {}

   public colorCode(code: string): SafeStyle {
     let result;

     switch (code) {
      case 'C1' :
        result = '#FFBA80';
        break;
      case 'C2' :
        result = '#B2F699';
        break;
      default:
        result = 'transparent';
        break;
     }

     return this.sanitizer.bypassSecurityTrustStyle(result);
   }
}

Answer 1

您可以只调用单元格本身的背景颜色：

@Component({
   selector: 'my-app',
   encapsulation: ViewEncapsulation.None,
   styles: [`
      .k-grid .no-padding {
        padding: 0;
      }
      .whole-cell {
        display: block;
        width: 100%;
        height: 100%;
        padding: 8px 12px; /* depends on theme */
      }
  `],
   template: `
       <kendo-grid [data]="gridData">
         <kendo-grid-column field="ProductName" title="Product Name">
         </kendo-grid-column>
         <kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
         </kendo-grid-column>
         <kendo-grid-column  let-dataItem field="code" title="Code" width="230" class="no-padding" [style.backgroundColor]="colorCode(dataItem.code)">
             <ng-template kendoGridCellTemplate>
              <span class="whole-cell" 
              style="font-size: 9px;">
                {{ dataItem.code }}
              </span>
            </ng-template>
         </kendo-grid-column>
       </kendo-grid>
   `
})
export class AppComponent {
   ...
}