# Angular Grid Row and Cell Highlighting

The [Kendo UI for Angular Grid](https://www.telerik.com/kendo-angular-ui-develop/components/grid) supports highlighting specific rows and cells based on conditions or criteria. This feature allows you to visually emphasize important data without affecting the selection state, making it ideal for drawing attention to critical information, status indicators, or data that meets specific conditions.

In this article, you will learn about:

* [Row highlighting](https://www.telerik.com/kendo-angular-ui-develop/components/grid/rows/highlighting#row-highlighting)—Highlight entire rows based on item keys.
* [Cell highlighting](https://www.telerik.com/kendo-angular-ui-develop/components/grid/rows/highlighting#cell-highlighting)—Highlight specific cells within rows.
* [Custom item keys](https://www.telerik.com/kendo-angular-ui-develop/components/grid/rows/highlighting#custom-item-keys)—Use custom functions to determine highlight keys.
* [Dynamic highlighting](https://www.telerik.com/kendo-angular-ui-develop/components/grid/rows/highlighting#dynamic-highlighting)—Update highlights based on changing conditions.
* [Real-world scenarios](https://www.telerik.com/kendo-angular-ui-develop/components/grid/rows/highlighting#real-world-scenarios)—Practical examples for inventory management and business applications.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/row-highlighting/basic/source.txt)

## Row Highlighting

To highlight entire rows, use the [`kendoGridHighlight`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/highlightdirective) directive and provide an array of [`HighlightItem`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/highlightitem) objects. By default, the Grid uses the row index as the item key.

```html
<kendo-grid 
    [data]="gridData"
    kendoGridHighlight
    [highlightedKeys]="highlightedKeys">
</kendo-grid>
```

```typescript
export class AppComponent {
    public gridData = products;
    public highlightedKeys: HighlightItem[] = [
        { itemKey: 0 },
        { itemKey: 2 }
    ];
}
```

## Cell Highlighting

To highlight specific cells, include the [`columnKey`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/highlightitem#columnkey) property in the [`HighlightItem`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/highlightitem). By default, the Grid uses the column index as the column key.

```html
<kendo-grid 
    [data]="gridData"
    kendoGridHighlight
    [highlightedKeys]="highlightedKeys">
</kendo-grid>
```

```typescript
export class AppComponent {
    public gridData = products;
    public highlightedKeys = [
        { itemKey: 1, columnKey: 0 }, // Highlight first cell of second row
        { itemKey: 3, columnKey: 2 }  // Highlight third cell of fourth row
    ];
}
```

> tip You can mix row and cell highlighting in the same configuration. Items without a [`columnKey`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/highlightitem#columnkey) will highlight the entire row, while items with a [`columnKey`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/highlightitem#columnkey) will highlight only the specified cell.

## Custom Item Keys

Use the [`kendoGridHighlight`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/highlightdirective#kendoGridHighlight) input to specify a custom field for identifying items, and the [`highlightColumnKey`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/highlightdirective#highlightColumnKey) input to define a custom function for column identification.

```html
<kendo-grid 
    [data]="gridData"
    [kendoGridHighlight]="'ProductID'"
    [highlightedKeys]="highlightedKeys"
    [highlightColumnKey]="columnKeyFunction">
</kendo-grid>
```

```typescript
export class AppComponent {
    public gridData = products;
    public highlightedKeys: HighlightItem[] = [
        { itemKey: 1, columnKey: 'ProductName' },
        { itemKey: 4 }
    ];
    
    public columnKeyFunction = (column: ColumnComponent): string => column.field;
}
```

This approach is particularly useful when working with data that has unique identifiers, allowing you to maintain highlight consistency even when the data is sorted, filtered, or paginated.

The following example demonstrates custom item keys for highlighting.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/row-highlighting/custom-keys/source.txt)

## Dynamic Highlighting

The highlighting feature supports dynamic updates, allowing you to change highlighted items based on user interactions or changing data conditions. This is useful for creating interactive dashboards or real-time data monitoring interfaces.

```typescript
export class AppComponent {
    public gridData = products;
    public highlightedKeys: HighlightItem[] = [];
    public priceThreshold = 50;
    
    public updateHighlighting(): void {
        this.highlightedKeys = this.gridData
            .filter(product => product.UnitPrice > this.priceThreshold)
            .map(product => ({
                itemKey: product.ProductID,
                columnKey: 'UnitPrice'
            }));
    }
    
    public highlightDiscontinuedProducts(): void {
        this.highlightedKeys = this.gridData
            .filter(product => product.Discontinued)
            .map(product => ({
                itemKey: product.ProductID
            }));
    }
}
```

The following example demonstrates dynamic highlighting with interactive controls.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/row-highlighting/dynamic/source.txt)

## Real-World Scenarios

In production applications, highlighting serves as a powerful visual tool for operational efficiency and decision-making. Business users rely on highlighted data to quickly identify actionable items, monitor key performance indicators, and respond to critical situations without having to scan through extensive datasets.

The Data Grid's highlighting feature excels in scenarios where immediate visual feedback is essential, such as:

* **Financial dashboards:** Highlighting transactions that exceed thresholds or require approval.
* **Inventory systems:** Drawing attention to stock levels, expiring products, or supply chain issues.
* **Project management:** Emphasizing overdue tasks, critical milestones, or resource conflicts.
* **Quality control:** Flagging items that fail inspections or require immediate attention.
* **Sales analytics:** Spotlighting high-performing products, regions, or representatives.

The demos below show a comprehensive inventory management system where highlighting transforms raw data into actionable business insights.

### Inventory Management Demo

The highlighting feature is particularly effective in business applications such as inventory management, where you need to draw attention to critical information like low stock, out-of-stock items, or products requiring immediate attention.

For a comprehensive inventory management example with realistic business scenarios, explore the demo below.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/row-highlighting/inventory-management/source.txt)

### Advanced Features Integration Demo

The highlighting feature works seamlessly with other Grid features such as grouping, filtering, sorting, and paging. You can combine multiple highlighting scenarios in a single application.

The following demo showcases how to integrate features like grouping, filtering, paging, and sorting using the [`kendoGridBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/databindingdirective) directive, while maintaining the highlighting functionality.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/row-highlighting/combined-features/source.txt)

## Suggested Links

* [AI-Powered Row Highlight](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-powered-row-highlight)
* [HighlightDirective API](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/highlightdirective)
* [HighlightItem Interface](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/highlightitem)
* [Grid Styling](https://www.telerik.com/kendo-angular-ui-develop/components/grid/styling-and-appearance/rows)
* [API Reference of the GridComponent](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent)