Angular Data Grid Styling Cells

The Grid enables you to customize the appearance of the cells and change their default layout based on some conditions.

To style specific cells of the Grid, you can:

• Style cells on the fly
• Set the background for specific row cells

The custom CSS rules take effect if:

• They are set globally in the project. For example, in the project root styles.css file.
• The encapsulation property is set to ViewEncapsulation.None for the specific component where the custom styles are used.

Styling Cells on the Fly

You can apply specific styling to the cells dynamically.

To compute the styles for a cell on the fly:

1. Define the CellTemplateDirective for the corresponding column.
2. Apply a custom background color to the whole cell:
   1. Wrap the cell value and set the padding for the wrapper element.
      html

      <ng-template kendoGridCellTemplate let-dataItem>
          <span style="display: block; padding: 8px 12px;"
              [style.backgroundColor]="colorCode(dataItem.code)">
            {{ dataItem.code }}
          </span>
      </ng-template>

   2. Override the default cell padding of the Grid through CSS code.
      css

      .k-grid .no-padding {
          padding: 0;
      }

3. Sanitize the CSS values in the background color function.
   ts

   public colorCode(code: string): SafeStyle {
       ...
       return this.sanitizer.bypassSecurityTrustStyle(myColor);
   }

The following example demonstrates how to style the cell background color by using CellTemplateDirective.

Change Theme

Theme

Loading ...

Highlighting Specific Row Cells

To highlight a specific row cell of the Grid, combine the rowClass and the component class option of the ColumnComponent. As a result, the styles you want to use will apply only when both settings are active.

The following example demonstrates how to apply a background color to specific cells using by the rowClass function.

Change Theme

Theme

Loading ...

Suggested Links

• ColumnComponent
• API Reference of the GridComponent
• API Index of the Grid
• Creating Custom Styles with ThemeBuilder