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);
}
}
Copyright Notice:Content Author:「ps0604」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/53579944/template-background-not-covered-in-kendo-for-angular-grid