Skip to content

Latest commit

 

History

History
51 lines (40 loc) · 2.16 KB

datagrid-cell-text-highlight.md

File metadata and controls

51 lines (40 loc) · 2.16 KB
title page_title description type slug tags res_type
Highlighting the Text in the DataGrid through Search Entry
Searching and Highlighting the Result in the DataGrid Cells - .NET MAUI Knowledge Base
Learn how to highlight the text in the cells of the Telerik UI for .NET MAUI DataGrid component through the Search entry when searching from an external UI.
how-to
datagrid-cell-text-highlight
maui, datagrid, ui for maui, highlight search result, text highlight
kb

Environment

Version Product
3.2.1 Telerik UI for .NET MAUI DataGrid

Description

How can I highlight a chunk of text inside a Telerik UI for .NET MAUI DataGrid cell when searching from an external UI?

Solution

Generally, to achieve the desired scenario, use a Telerik UI for .NET MAUI Entry control for the Searching UI.

To highlight the text in the DataGrid, use a CellTemplateColumn and add a RadHighlightLabel in it. Then, set the UnformattedText, HighlightText, and HighlightTextColor properties of the RadHighlight label to get the following result:

.NET MAUI DataGrid Highlighted Text

By binding the HighlightText property to the text value of the Entry you will be able to get the characters which need to be highlighted. The UnformattedText property must be bound to the ItemsSource propertys.

The following example shows the implementation the suggested approach.

<telerik:RadEntry x:Name="searchEntry"
				  HeightRequest="50"
				  WidthRequest="300"
				  Placeholder="Search Entry"/>
<telerik:RadDataGrid x:Name="dataGrid" AutomationId="dataGrid" AutoGenerateColumns="False">
	<telerik:RadDataGrid.Columns>
		<telerik:DataGridTextColumn PropertyName="Country" HeaderText="HighlightedLabel">
			<telerik:DataGridTextColumn.CellContentTemplate>
				<DataTemplate>
					<telerik:RadHighlightLabel UnformattedText="{Binding Country}"
											   HighlightText="{Binding Source={x:Reference searchEntry}, Path=Text}"
											   HighlightTextColor="Red"/>
				</DataTemplate>
			</telerik:DataGridTextColumn.CellContentTemplate>
		</telerik:DataGridTextColumn>
	</telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>