From 1e779340f92b1aa44e722547dd062e157d9c8ca2 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Mon, 14 Jul 2025 11:18:47 +0300
Subject: [PATCH 1/2] docs(Grid): add highlighting docs
---
components/grid/highlighting.md | 115 ++++++++++++++++++++++++++++++++
components/grid/overview.md | 1 +
2 files changed, 116 insertions(+)
create mode 100644 components/grid/highlighting.md
diff --git a/components/grid/highlighting.md b/components/grid/highlighting.md
new file mode 100644
index 000000000..af7ba61ff
--- /dev/null
+++ b/components/grid/highlighting.md
@@ -0,0 +1,115 @@
+---
+title: Highlighting
+page_title: Grid Highlighting
+slug: grid-highlighting
+description: Highlight rows and cells in the Telerik Blazor Grid to draw attention to important data.
+tags: telerik,blazor,grid,highlight,highlighting
+published: true
+position: 40
+---
+
+# Blazor Grid Highlighting
+
+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.
+
+## Key Features
+
+* Highlight entire rows by providing a list of data items.
+* Highlight individual cells by specifying the data item and column.
+* Combine row and cell highlighting as needed.
+* Highlighting uses a visual style similar to selection, but does not affect selection state or user interaction.
+
+To see the Grid highlighting in action, check the below [example](#example).
+
+## API Reference
+
+The Grid highlighting feature exposes the following parameters:
+
+- `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.
+- `HighlightedCells` — Highlight individual cells by specifying both the data item and the column field. Both values must match the Grid data and column definitions.
+
+See [Grid Highlighting API Reference](slug:telerik.blazor.components.gridhighlighting) for details about these parameters and the `GridHighlightedCellDescriptor` type.
+
+## Example
+
+>caption Example of Highlighting Rows and Cells in the Blazor Grid
+
+````RAZOR
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private List GridData { get; set; } = new();
+ private List HighlightedItems { get; set; } = new();
+ private List HighlightedCells { get; set; } = new();
+
+ protected override void OnInitialized()
+ {
+ GenerateData();
+ SetHighlight();
+ }
+
+ private void SetHighlight()
+ {
+ // Highlight 5 items starting from the 3rd item in the data list
+ HighlightedItems = GridData.Skip(2).Take(5).ToList();
+
+ // Highlight specific cells: the ProductName of the first item and Discounted of the second item
+ HighlightedCells = new List
+ {
+ new GridHighlightedCellDescriptor
+ {
+ ColumnField = nameof(Product.ProductName),
+ DataItem = GridData[0]
+ },
+ new GridHighlightedCellDescriptor
+ {
+ ColumnField = nameof(Product.Discontinued),
+ DataItem = GridData[1]
+ }
+ };
+ }
+
+ private void GenerateData()
+ {
+ var random = new Random();
+ for (int i = 1; i <= 20; i++)
+ {
+ GridData.Add(new Product
+ {
+ ProductId = i,
+ ProductName = $"Product {i}",
+ UnitPrice = Math.Round(random.NextDouble() * 100, 2),
+ UnitsInStock = random.Next(1, 100),
+ CreatedAt = DateTime.Now.AddDays(-random.Next(1, 100)),
+ Discontinued = i % 5 == 0
+ });
+ }
+ }
+
+ public class Product
+ {
+ public int ProductId { get; set; }
+ public string ProductName { get; set; } = string.Empty;
+ public double UnitPrice { get; set; }
+ public int UnitsInStock { get; set; }
+ public DateTime CreatedAt { get; set; }
+ public bool Discontinued { get; set; }
+ }
+}
+````
+
+## See Also
+
+* [Grid Selection](slug:grid-selection-overview)
\ No newline at end of file
diff --git a/components/grid/overview.md b/components/grid/overview.md
index d8ec87f77..ff65765d9 100644
--- a/components/grid/overview.md
+++ b/components/grid/overview.md
@@ -154,6 +154,7 @@ The Grid supports custom content in various parts of the component such as data
* [Drag and drop rows](slug:grid-drag-drop-overview)—move rows in a Grid or between different Grids.
* [Loading animation](slug:grid-loading)—show a loading animation to improve user experience during long data operations.
* Scrolling—the Grid will show standard scrollbars automatically if the data does not fit the current component width and height.
+* [Highlighting](slug:grid-highlighting)—highlight rows or cells programmatically to draw attention to important data.
## Grid Parameters
From a14e422c8570f9c6052b33fd23a3acbcc43a4196 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Wed, 16 Jul 2025 11:18:36 +0300
Subject: [PATCH 2/2] docs(Grid): apply review recommendations
---
components/grid/highlighting.md | 11 ++++++-----
components/grid/selection/cells.md | 1 +
components/grid/selection/rows.md | 1 +
3 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/components/grid/highlighting.md b/components/grid/highlighting.md
index af7ba61ff..84b09f572 100644
--- a/components/grid/highlighting.md
+++ b/components/grid/highlighting.md
@@ -16,7 +16,7 @@ The Telerik Blazor Grid enables you to highlight rows and cells programmatically
* Highlight entire rows by providing a list of data items.
* Highlight individual cells by specifying the data item and column.
-* Combine row and cell highlighting as needed.
+* Combine row and cell highlighting.
* Highlighting uses a visual style similar to selection, but does not affect selection state or user interaction.
To see the Grid highlighting in action, check the below [example](#example).
@@ -25,14 +25,14 @@ To see the Grid highlighting in action, check the below [example](#example).
The Grid highlighting feature exposes the following parameters:
-- `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.
-- `HighlightedCells` — Highlight individual cells by specifying both the data item and the column field. Both values must match the Grid data and column definitions.
+- `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.
+- `HighlightedCells`—Highlight individual cells by specifying both the data item and the column field. Both values must match the Grid data and column definitions.
See [Grid Highlighting API Reference](slug:telerik.blazor.components.gridhighlighting) for details about these parameters and the `GridHighlightedCellDescriptor` type.
## Example
->caption Example of Highlighting Rows and Cells in the Blazor Grid
+>caption Example of highlighting rows and cells in the Blazor Grid
````RAZOR