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

Customizing Filtering Control

RadCardView filtering control can be customized in order to match the expected design or functionality.

Read the Filtering article to see how to use the filtering feature.

To hide the button that opens the filtering control popup, set the IsFilteringAllowed property to False.

Example 1: Setting the IsFilteringAllowed property

<telerik:RadCardView IsFilteringAllowed="False" /> 

Figure 1: Hidden filtering control icon

WPF RadCardView Hidden filtering control icon

To keep the filtering control popup open when you click outside of it, set the FilteringDropDownStaysOpen property to True.

Example 2: Setting the FilteringDropDownStaysOpen property

<telerik:RadCardView FilteringDropDownStaysOpen="True" /> 
To change the visibility of the Filter button in the popup, set the ShowFilterButton property of the associated CardDataFieldDescriptor.

Example 3: Setting the ShowFilterButton property

    <telerik:CardDataFieldDescriptor DataMemberBinding="{Binding Name}" ShowFilterButton="False"/> 

Figure 2: Hidden filtering button

WPF RadCardView Hidden filtering button

To change the visibility of the distinct values list from the popup, set the ShowDistinctFilters property of the associated CardDataFieldDescriptor.

Example 4: Setting the ShowDistinctFilters property

    <telerik:CardDataFieldDescriptor DataMemberBinding="{Binding Name}" ShowDistinctFilters="False"/> 

Figure 3: Hidden the distinct values list

WPF RadCardView Hidden the distinct values list

To change the visibility of the field filters in the popup, set the ShowFieldFilters property of the associated CardDataFieldDescriptor.

Example 5: Setting the ShowFieldFilters property

    <telerik:CardDataFieldDescriptor DataMemberBinding="{Binding Name}" ShowFieldFilters="False"/> 

Figure 4: Hidden the field filters

WPF RadCardView Hidden the field filters

Custom Filtering Control

The UI filters are hosted in a FilteringControl element. To get or replace the control, use the FilteringControl property of the associated CardDataFieldDescriptor. The value assigned to the property should implement the IFilteringControl interface or alternatively the FilteringControl class can be used as a base for the implementation.

Example 6: Creating custom FilteringControl and changing few of the default settings

public class CustomFilteringControl : FilteringControl 
    public CustomFilteringControl(CardDataFieldDescriptor cardDataFieldDescriptor) 
        : base(cardDataFieldDescriptor) 
    public override void Prepare(CardDataFieldDescriptor cardDataFieldDescriptorToPrepare) 
        var viewModel = (FilteringViewModel)this.DataContext; 
        viewModel.FieldFilterLogicalOperator = FilterCompositionLogicalOperator.Or; 
        viewModel.Filter1.Operator = FilterOperator.Contains; 
        viewModel.Filter1.Value = "1"; 
        viewModel.SelectAll = true; 

Example 7: Setting the custom FilteringControl

public MainWindow() 
    var descriptor = this.cardView.DataFieldDescriptors[0]; 
    descriptor.FilteringControl = new CustomFilteringControl(descriptor); 

Figure 5: Customized FiltertingControl

WPF RadCardView Customized FiltertingControl

The UI of the FilteringControl can be customized using the FilteringControlStyle property of the CardDataFieldDescriptor.

Example 8: Setting the custom FilteringControlStyle

    <Style TargetType="cardView:FilteringControl"> 
        <Setter Property="Background" Value="LightSeaGreen" /> 
The "cardView:" namespace points to xmlns:cardView="clr-namespace:Telerik.Windows.Controls.Data.CardView;assembly=Telerik.Windows.Controls.Data"

Figure 6: Customized FiltertingControlStyle

WPF RadCardView Customized FiltertingControlStyle

See Also

In this article