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

How to Customize the Filtering UI

You are free to customize the appearance of the filtering component which appears when clicking the options icon on each column's header. In order to create a custom filtering UI, you need to inherit from the DataGridFilterControlBase class. This article will guide you through the process of creating a custom control that will be used for applying the filtering. Figure 1 shows the default appearance of the functionality

Figure 1: Default appearance of the filtering UI

Default Filtering

1. The first step is to create the custom Control which will inherit from the DataGridFilterControlBase class:

<grid:DataGridFilterControlBase xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:grid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid"
             x:Class="SDKBrowser.Examples.DataGridControl.FilteringUICategory.CustomFilteringUIExample.TemplateColumnFilteringUI">
    <StackLayout Margin="10">
        <Picker x:Name="descriptorOperatorPicker" 
                TextColor="Black"/>
        <Entry x:Name="textEntry"/>
    </StackLayout>
</grid:DataGridFilterControlBase>
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class TemplateColumnFilteringUI : DataGridFilterControlBase
{
    public TemplateColumnFilteringUI()
    {
        this.InitializeComponent();
    }

    public FilterDescriptorBase FilterDescriptor { get; set; }

    public override FilterDescriptorBase BuildDescriptor()
    {
        TextFilterDescriptor textDescriptor = new TextFilterDescriptor();
        textDescriptor.PropertyName = this.PropertyName;
        textDescriptor.Value = this.textEntry.Text;
        textDescriptor.Operator = (TextOperator)this.descriptorOperatorPicker.SelectedIndex;

        return textDescriptor;
    }

    protected override void Initialize()
    {
        this.descriptorOperatorPicker.ItemsSource = this.GetOperators();
        var textFilterDescriptor = this.FilterDescriptor as TextFilterDescriptor;
        if (textFilterDescriptor != null)
        {
            this.descriptorOperatorPicker.SelectedIndex = (int)textFilterDescriptor.Operator;
            this.textEntry.Text = textFilterDescriptor.Value.ToString();
        }
        else
        {
            this.descriptorOperatorPicker.SelectedIndex = 0;
            if (!string.IsNullOrEmpty(this.textEntry.Text))
            {
                this.textEntry.Text = null;
            }
        }
    }

    private List<string> GetOperators()
    {
        var operators = Enum.GetNames(typeof(TextOperator)).ToList();
        return operators;
    }
}

You should override the required methods as shown in the C# snippet above.

2. Eventually, you need to set the already created component as a filtering control for the column you need to update. This is done by creating a custom DataGridCommand:

public class CustomOptionsTapCommand : DataGridCommand
{
    private TemplateColumnFilteringUI filterControl;

    public CustomOptionsTapCommand()
    {
        this.Id = DataGridCommandId.OptionsTap;
    }

    public override void Execute(object parameter)
    {
        var optionsTapContext = parameter as OptionsTapContext;
        if (optionsTapContext != null)
        {
            if (this.filterControl == null)
            {
                this.filterControl = new TemplateColumnFilteringUI();
            }

            DataGridTypedColumn column = (DataGridTypedColumn)optionsTapContext.Column;
            this.filterControl.PropertyName = column.PropertyName;
            this.filterControl.FilterDescriptor = optionsTapContext.AssociatedDescriptor;
            optionsTapContext.FilterControl = filterControl;
        }

        this.Owner.CommandService.ExecuteDefaultCommand(DataGridCommandId.OptionsTap, optionsTapContext);
    }
}

Figure 2 shows the appearance of the control once the custom filtering control is set.

Figure 2: Appearance of the Filtering UI after applying the custom control

Custom Filtering

You can review an actual sample that shows how to achieve the functionality in the Examples/DataGrid/FilteringUI folder from the SDK Samples Browser application.

See Also

In this article