Last Updated: 17 Jul 2018 15:42 by ADMIN
Created on: 03 Oct 2017 13:28
Category: Grid
Type: Feature Request
Allow for the ability to add associate a css class with the whole grid cell.
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 field="ProductName" title="Name" width="250">
            <kendo-grid-column field="Category.CategoryName" title="Category">
            <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>
            <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
            <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
                <ng-template kendoGridCellTemplate let-dataItem>
                    <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>

(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,
1 comment
T. Tsonev
Posted on: 17 Jul 2018 15:42
Classes can be added to cells, headers and footers, see: