How to Remove Cell Background Highlighting When Searching as you Type in RadGridView
Environment
Product Version | 2019.1.220 |
Product | RadGridView for WPF |
Description
How to remove the default cell background highlighting when search as you type and replace it with a custom one.
Solution
- Create a custom column that derives from
GridViewDataColumn
. - Override the
CreateCellElement
method of the column. - Replace the default
HighlightTextBlock
element with aTextBlock
. - Populate the new TextBlock with customized
Run
elements in order to reflect the search result in the cell.
public class CustomDataColumn : GridViewDataColumn
{
public override FrameworkElement CreateCellElement(GridViewCell cell, object dataItem)
{
var element = base.CreateCellElement(cell, dataItem);
if (element is HighlightTextBlock)
{
var textBlock = (HighlightTextBlock)element;
// The next three lines of code are required in order to apply the built-in highlighting, thus populating the TextEffects.
// This way we have the means to create the the Run elements properly.
textBlock.DataContext = dataItem;
textBlock.Text = textBlock.GetValue(HighlightTextBlock.TextProperty).ToString();
textBlock.HighlightBrush = Brushes.Green;
if (textBlock.TextEffects.Count > 0 && !string.IsNullOrEmpty(textBlock.Text))
{
var newCellElement = new TextBlock();
for (int i = 0; i < textBlock.Text.Length; i++)
{
char character = textBlock.Text[i];
bool isHighlightedCharacter = textBlock.TextEffects.Any(x => x.PositionStart <= i && i < (x.PositionStart + x.PositionCount));
newCellElement.Inlines.Add(new Run(character.ToString()) { Background = isHighlightedCharacter ? new SolidColorBrush(Colors.Tomato) { Opacity = 0.5 } : null });
}
return newCellElement;
}
}
return element;
}
}
<telerik:RadGridView.Columns>
<local:CustomDataColumn DataMemberBinding="{Binding Address}" />
</telerik:RadGridView.Columns>