Edit this page

Styling Filter Row

In this topic we will discuss:

Figure 1: RadGridView's filter row

Rad Grid View Styles and Templates Styling Filter Row 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"/>
</Style>

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"/>
</Style>

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

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

RadGridView with styled GridViewEditorPresenter

See Also

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy