Edit this page

Styling Search Panel

Before reading this topic, you might find it useful to get familiar with RadGridView's Search As You Type functionality.

You can style the SearchPanel within the RadGridView control by by creating an appropriate Style that targets the GridViewSearchPanel element.

You have two options:

  • To create an empty style and set it up on your own.

  • To copy the default style of the control and modify it.

If you choose to define the style in the resources of the application, it would be available for the entire application. This allows you to define a style only once and then reuse it where needed.

You can apply a style to the Search Panel, similar to Example 1:

[XAML] Example 1: Applying a style to the search panel of RadGridView:

<Style TargetType="telerik:GridViewSearchPanel">
        <Setter Property="FontSize" Value="20"></Setter>
        <Setter Property="FontWeight" Value="Bold"></Setter>
        <Setter Property="Height" Value="50"></Setter>

Figure 1: Appearance of the control after the style is applied:

Appearance of the control after the style is applied

You can find the GridViewSearchPanel template structure in the Templates Structure article for RadGridView.

Change the color of the highlighted text

By default, the symbols matching the searching criteria are colored in red. You can easily change the highlighted text value to green by changing the value of the HightlightBrush in the HighlightTextBlock, as shown in Example 2:

[XAML] Example 2: Change the HighlightBrush of the HighlightTextBlock.

<Style TargetType="telerik:HighlightTextBlock">
        <Setter Property="HighlightBrush" Value="Green"/>       

Figure 2: Appearance of the highlighted text after the style is applied

Appearance of the highlighted text after the style is applied

If you're using Implicit Styles, you should base your style on the HighlightTextBlockStyle.

See Also