Angular Grid Row and Cell Highlighting
The Kendo UI for Angular 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:
- Basic row highlighting—Highlight entire rows based on item keys.
- Cell highlighting—Highlight specific cells within rows.
- Custom item keys—Use custom functions to determine highlight keys.
- Dynamic highlighting—Update highlights based on changing conditions.
- Real-world scenarios—Practical examples for inventory management and business applications.
Basic Row Highlighting
To highlight entire rows, use the kendoGridHighlight directive and provide an array of HighlightItem objects. By default, the Grid uses the row index as the item key.
<kendo-grid
[data]="gridData"
kendoGridHighlight
[highlightedKeys]="highlightedKeys">
</kendo-grid>export class AppComponent {
public gridData = products;
public highlightedKeys: HighlightItem[] = [
{ itemKey: 0 },
{ itemKey: 2 }
];
}The following example demonstrates basic row highlighting.
Cell Highlighting
To highlight specific cells, include the columnKey property in the HighlightItem. By default, the Grid uses the column index as the column key.
<kendo-grid
[data]="gridData"
kendoGridHighlight
[highlightedKeys]="highlightedKeys">
</kendo-grid>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
];
}You can mix row and cell highlighting in the same configuration. Items without a
columnKeywill highlight the entire row, while items with acolumnKeywill highlight only the specified cell.
Custom Item Keys
Use the kendoGridHighlight input to specify a custom field for identifying items, and the highlightColumnKey input to define a custom function for column identification.
<kendo-grid
[data]="gridData"
[kendoGridHighlight]="'ProductID'"
[highlightedKeys]="highlightedKeys"
[highlightColumnKey]="columnKeyFunction">
</kendo-grid>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.
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.
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.
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.
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 directive, while maintaining the highlighting functionality.