At current, if one wants to, (for example), highlight the entirety of a row, the natural choice would be to associate a background color with that row. However, currently, this is not possible. The closest we can come is to conditionally associate a given color with a div that happens to live in that cell, e.g.:
<kendo-grid [data]="gridData" [height]="410">
<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">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<div [class.myClass2]="dataItem.UnitPrice >= 20">{{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>
(where the class.myClass2 is defined as follows):
styles: [`
.k-grid td {
position: relative;
}
.myClass2 {
background-color: rgba(255, 0, 0, 0.5);
color: white;
padding: 8px 12px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
}
`]
But this doesn't reliably highlight a predictable amount of the cell, especially across browsers.
Thanks for your consideration,
Jeff