diff --git a/components/grid/highlighting.md b/components/grid/highlighting.md new file mode 100644 index 0000000000..84b09f5729 --- /dev/null +++ b/components/grid/highlighting.md @@ -0,0 +1,116 @@ +--- +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. +* 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) +* [Highlighting API Reference](slug:telerik.blazor.components.gridhighlighting) \ No newline at end of file diff --git a/components/grid/overview.md b/components/grid/overview.md index d8ec87f77f..ff65765d96 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 diff --git a/components/grid/selection/cells.md b/components/grid/selection/cells.md index d57d3fd55e..d90f54bdbe 100644 --- a/components/grid/selection/cells.md +++ b/components/grid/selection/cells.md @@ -237,3 +237,4 @@ When using [Grid templates](slug:components/grid/features/templates) with cell s * [Live Demo: Grid Cell Selection](https://demos.telerik.com/blazor-ui/grid/cell-selection) * [Blazor Grid](slug:grid-overview) +* [Grid Highlighting](slug:grid-highlighting) diff --git a/components/grid/selection/rows.md b/components/grid/selection/rows.md index 567060fce3..ed3fcef7a0 100644 --- a/components/grid/selection/rows.md +++ b/components/grid/selection/rows.md @@ -213,3 +213,4 @@ The Grid clears the `SelectedItems` collection when the user drags and drops sel * [Live Demo: Grid Row Selection](https://demos.telerik.com/blazor-ui/grid/row-selection) * [Blazor Grid](slug:grid-overview) +* [Grid Highlighting](slug:grid-highlighting) pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy