Blazor DataGrid AI Highlight
Describe a condition in plain words and let the AI model pick the rows of a Blazor DataGrid that match it. The rows are highlighted in place while the grid keeps its paging, sorting and filtering.
Order | Customer | Employee | Order date | Freight | Ship country |
|---|---|---|---|---|---|
| 10248 | Vins et alcools Chevalier | Buchanan | 07/04/2023 | ¤32.38 | France |
| 10249 | Toms Spezialitäten | Suyama | 07/05/2023 | ¤11.61 | Germany |
| 10250 | Hanari Carnes | Peacock | 07/08/2023 | ¤65.83 | Brazil |
| 10251 | Victuailles en stock | Leverling | 07/08/2023 | ¤41.34 | France |
| 10252 | Suprêmes délices | Peacock | 07/09/2023 | ¤51.30 | Brazil |
| 10253 | Hanari Carnes | Leverling | 07/10/2023 | ¤58.17 | Brazil |
| 10254 | Chop-suey Chinese | Buchanan | 07/11/2023 | ¤22.98 | Switzerland |
| 10255 | Richter Supermarkt | Dodsworth | 07/12/2023 | ¤148.33 | Switzerland |
| 10256 | Wellington Importadora | Leverling | 07/15/2023 | ¤13.97 | Brazil |
| 10257 | HILARION-Abastos | Peacock | 07/16/2023 | ¤81.91 | Venezuela |
The page sends a compact line per order and the condition to the IChatClient from IAIChatService.GetChatClient(), asking for a JSON object with the matching ids and a short explanation.
The ids go into a set that the CellRender handler checks to add a background to the cells of the matching rows. Unlike a filter, the user still sees the other rows and the context around the matches;
the same idea works with RowRender, or for the appointments of a Scheduler or the items of a Tree.
Frequently asked questions
How does AI highlight work?
The rows and the condition are sent to the model, which returns the matching ids; a RowRender handler styles those rows while the grid keeps its paging and sorting.
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT