Skip to content

Commit 5d1c96e

Browse files
authored
docs(Grid): add highlighting docs (#3100)
* docs(Grid): add highlighting docs * docs(Grid): apply review recommendations
1 parent 60976d8 commit 5d1c96e

File tree

4 files changed

+119
-0
lines changed

4 files changed

+119
-0
lines changed

components/grid/highlighting.md

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
title: Highlighting
3+
page_title: Grid Highlighting
4+
slug: grid-highlighting
5+
description: Highlight rows and cells in the Telerik Blazor Grid to draw attention to important data.
6+
tags: telerik,blazor,grid,highlight,highlighting
7+
published: true
8+
position: 40
9+
---
10+
11+
# Blazor Grid Highlighting
12+
13+
The Telerik Blazor Grid enables you to highlight rows and cells programmatically. Use highlighting to draw attention to important data, indicate status, or visually group related records. Highlighting does not require user interaction and is fully controlled by the application logic.
14+
15+
## Key Features
16+
17+
* Highlight entire rows by providing a list of data items.
18+
* Highlight individual cells by specifying the data item and column.
19+
* Combine row and cell highlighting.
20+
* Highlighting uses a visual style similar to selection, but does not affect selection state or user interaction.
21+
22+
To see the Grid highlighting in action, check the below [example](#example).
23+
24+
## API Reference
25+
26+
The Grid highlighting feature exposes the following parameters:
27+
28+
- `HighlightedItems`—Highlight entire rows by providing the data items to highlight. The list must contain references to items from the grid's data source, not new instances.
29+
- `HighlightedCells`—Highlight individual cells by specifying both the data item and the column field. Both values must match the Grid data and column definitions.
30+
31+
See [Grid Highlighting API Reference](slug:telerik.blazor.components.gridhighlighting) for details about these parameters and the `GridHighlightedCellDescriptor` type.
32+
33+
## Example
34+
35+
>caption Example of highlighting rows and cells in the Blazor Grid
36+
37+
````RAZOR
38+
<TelerikGrid Data="@GridData"
39+
HighlightedItems="@HighlightedItems"
40+
HighlightedCells="@HighlightedCells"
41+
Pageable="true">
42+
<GridColumns>
43+
<GridColumn Field="@nameof(Product.ProductId)" />
44+
<GridColumn Field="@nameof(Product.ProductName)" />
45+
<GridColumn Field="@nameof(Product.UnitPrice)" />
46+
<GridColumn Field="@nameof(Product.UnitsInStock)" />
47+
<GridColumn Field="@nameof(Product.CreatedAt)" />
48+
<GridColumn Field="@nameof(Product.Discontinued)" />
49+
</GridColumns>
50+
</TelerikGrid>
51+
52+
@code {
53+
private List<Product> GridData { get; set; } = new();
54+
private List<Product> HighlightedItems { get; set; } = new();
55+
private List<GridHighlightedCellDescriptor> HighlightedCells { get; set; } = new();
56+
57+
protected override void OnInitialized()
58+
{
59+
GenerateData();
60+
SetHighlight();
61+
}
62+
63+
private void SetHighlight()
64+
{
65+
// Highlight 5 items starting from the 3rd item in the data list
66+
HighlightedItems = GridData.Skip(2).Take(5).ToList();
67+
68+
// Highlight specific cells: the ProductName of the first item and Discounted of the second item
69+
HighlightedCells = new List<GridHighlightedCellDescriptor>
70+
{
71+
new GridHighlightedCellDescriptor
72+
{
73+
ColumnField = nameof(Product.ProductName),
74+
DataItem = GridData[0]
75+
},
76+
new GridHighlightedCellDescriptor
77+
{
78+
ColumnField = nameof(Product.Discontinued),
79+
DataItem = GridData[1]
80+
}
81+
};
82+
}
83+
84+
private void GenerateData()
85+
{
86+
var random = new Random();
87+
for (int i = 1; i <= 20; i++)
88+
{
89+
GridData.Add(new Product
90+
{
91+
ProductId = i,
92+
ProductName = $"Product {i}",
93+
UnitPrice = Math.Round(random.NextDouble() * 100, 2),
94+
UnitsInStock = random.Next(1, 100),
95+
CreatedAt = DateTime.Now.AddDays(-random.Next(1, 100)),
96+
Discontinued = i % 5 == 0
97+
});
98+
}
99+
}
100+
101+
public class Product
102+
{
103+
public int ProductId { get; set; }
104+
public string ProductName { get; set; } = string.Empty;
105+
public double UnitPrice { get; set; }
106+
public int UnitsInStock { get; set; }
107+
public DateTime CreatedAt { get; set; }
108+
public bool Discontinued { get; set; }
109+
}
110+
}
111+
````
112+
113+
## See Also
114+
115+
* [Grid Selection](slug:grid-selection-overview)
116+
* [Highlighting API Reference](slug:telerik.blazor.components.gridhighlighting)

components/grid/overview.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,7 @@ The Grid supports custom content in various parts of the component such as data
154154
* [Drag and drop rows](slug:grid-drag-drop-overview)—move rows in a Grid or between different Grids.
155155
* [Loading animation](slug:grid-loading)—show a loading animation to improve user experience during long data operations.
156156
* Scrolling—the Grid will show standard scrollbars automatically if the data does not fit the current component width and height.
157+
* [Highlighting](slug:grid-highlighting)—highlight rows or cells programmatically to draw attention to important data.
157158

158159

159160
## Grid Parameters

components/grid/selection/cells.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,3 +237,4 @@ When using [Grid templates](slug:components/grid/features/templates) with cell s
237237

238238
* [Live Demo: Grid Cell Selection](https://demos.telerik.com/blazor-ui/grid/cell-selection)
239239
* [Blazor Grid](slug:grid-overview)
240+
* [Grid Highlighting](slug:grid-highlighting)

components/grid/selection/rows.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,3 +213,4 @@ The Grid clears the `SelectedItems` collection when the user drags and drops sel
213213

214214
* [Live Demo: Grid Row Selection](https://demos.telerik.com/blazor-ui/grid/row-selection)
215215
* [Blazor Grid](slug:grid-overview)
216+
* [Grid Highlighting](slug:grid-highlighting)

0 commit comments

Comments
 (0)