Template background not covered in Kendo for Angular grid

1
votes

In this StackBlitz I have a Kendo for Angular grid with cell templates. The background color doesn't cover the entire cell, how to make it cover? Note that if I increase the span font size from 9px to 12px, the background is expanded but I need it to work even with small fonts.

@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);
   }
}
1
kendo-uikendo-gridkendo-ui-angular2

1 Answers

0
votes

You can just call the background-color on the cell itself:

@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 {
   ...
}