New to Telerik UI for WPF? Download free 30-day trial

Styling Filter Row

In this topic we will discuss:

Figure 1: RadGridView's filter row

Telerik WPF DataGrid Styles and Templates Styling FilterRow 01

Type of Editors

The type of the actual editor, which is determined, created and inserted at runtime, depends on the DataType of the column.

Here are the four different scenarios that you can get:

  • String: StringFilterEditor
  • DateTime: RadDateTimePicker
  • Boolean: Nothing
  • Other: TextBox

When the DataType of the column is of Boolean type, you will have IsTrue and IsFalse filter operators in the drop-down. For that reason, you do not need an editor.

Modifying the StringFilterEditor's Style

The StringFilterEditor is nothing more than a TextBox and a ToggleButton wrapped in a control. In order to change StringFilterEditor's visual appearance, you should modify its default style.

To learn how to modify the default StringFilterEditor style, please refer to the Modifying Default Styles article.

Example 1: Styling the StringFilterEditor

<Style TargetType="Editors:StringFilterEditor"> 
    <Setter Property="Template" Value="{StaticResource StringFilterEditorTemplate}"/> 
    <Setter Property="IsTabStop" Value="False"/> 
    <Setter Property="SnapsToDevicePixels" Value="True"/> 

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

Modifying the FieldFilterControl's Style

In order to change RadDropDownButton's (the funnel) visual appearance, you should create an appropriate style, targeting the FieldFilterControl element.

Example 2: Styling the FieldFilterControl

<Style TargetType="telerik:FieldFilterControl"> 
    <Setter Property="Template" Value="{StaticResource FieldFilterControlTemplate}"/> 
    <Setter Property="Padding" Value="5"/> 

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

Modifying Other Editors

Since the created editor will be inserted as the Content of PART_FilterEditorContentControl, you can attach to a FieldFilterEditorCreated event and apply the respective style to the respective editor. For example, if the editor is a plain TextBox, you can change its Background like so:

Example 3: Setting a background for the filtering row TextBox

private void clubsGrid_FieldFilterEditorCreated(object sender, EditorCreatedEventArgs e) 
    if (e.Column.UniqueName == "StadiumCapacity") 
        TextBox txtBox = e.Editor as TextBox; 
        if (txtBox != null) 
            txtBox.Background = new SolidColorBrush(Colors.Yellow); 
Private Sub clubsGrid_FieldFilterEditorCreated(sender As Object, e As Telerik.Windows.Controls.GridView.EditorCreatedEventArgs) 
    If e.Column.UniqueName = "StadiumCapacity" Then 
        Dim txtBox As TextBox = TryCast(e.Editor, TextBox) 
        If txtBox IsNot Nothing Then 
            txtBox.Background = New SolidColorBrush(Colors.Yellow) 
        End If 
    End If 
End Sub 

Figure 2: RadGridView with styled filter row

Telerik WPF DataGrid-styled-filter-row

See Also

In this article