Xamarin Forms Controls / DataGrid

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

Filtering

RadDataGrid supports both programmatic filtering and such applied through the UI - Filtering UI.

Programmatic Filtering

Programmatic filtering is achieved by adding different filter descriptors in the FilterDescriptor collection of the control. The following descriptor types are supported:

All FilterDescriptors are located in the Telerik.XamarinForms.Common.Data namespace:

xmlns:common="clr-namespace:Telerik.XamarinForms.Common.Data;assembly=Telerik.XamarinForms.Common"

Text Filter Descriptor

Properties:

  • PropertyName: Gets or sets the name of the property that is used to retrieve the value to filter by.
  • Operator: Gets or sets the TextOperator value that defines how the Value member is compared with each value from the items source.
  • Value: Gets or sets the value used in the comparisons. This is the right operand of the comparison.
  • IsCaseSensitive: Gets or sets a value that determines whether the text comparisons will be case-sensitive. Default value is true.

To use TextFilterDescriptor you need to add its instance to the RadDataGrid.FilterDescriptors collection and to set its PropertyName property to associate it with the property from your custom objects. Then through the Operator and Value properties you need to set the filter condition and the value to compare. You can also take advantage of the IsCaseSensitive property to determine if the text comparisons will be case-sensitive or not.

<common:TextFilterDescriptor PropertyName="Country"
                             Operator="StartsWith"
                             IsCaseSensitive="False" 
                             Value="En"/>

Numerical Filter Descriptor

Represents a Descriptor which filters by property of numerical data type. It exposes the following properties.

  • PropertyName: Gets or sets the name of the property that is used to retrieve the value to filter by.
  • Value: Gets or sets the value used in the comparisons. This is the right operand of the comparison.
  • Operator: Gets or sets the NumericalOperator value that defines the boolean logc behind the left and right operand comparison.

<common:NumericalFilterDescriptor PropertyName="StadiumCapacity"
                                  Operator="IsLessThan"
                                  Value="80000"/>

DateTime Filter Descriptor

The DateTimeFilterDescriptor is a Descriptor which filters by property of System.DateTime data type. It exposes the following properties:

  • PropertyName: Gets or sets the name of the property that is used to retrieve the value to filter by.
  • Value: Gets or sets the value used in the comparisons. This is the right operand of the comparison.
  • Operator: Gets or sets the NumericalOperator value that defines the boolean logic behind the left and right operand comparison.

<common:DateTimeFilterDescriptor PropertyName="Established"
                                 Operator="IsLessThan"
                                 Value="1900/01/01"/>

Boolean Filter Descriptor

The BooleanFilterDescriptor is a Descriptor which filters by property of System.Boolean data type. It exposes the following properties:

  • PropertyName: Gets or sets the name of the property that is used to retrieve the value to filter by.
  • Value: Gets or sets the value used in the comparisons. This is the right operand of the comparison.

<common:BooleanFilterDescriptor PropertyName="IsChampion"
                                Value="true"/>

Composite Filter Descriptor

The CompositeFilterDescriptor represents a special FilterDescriptorBase that stores an arbitrary number of other Descriptors instances. The logical AND or OR operator is applied upon all composed filters to determine the result of the PassesFilter routine.

<common:CompositeFilterDescriptor Operator="And">
    <common:CompositeFilterDescriptor.Descriptors>
        <common:NumericalFilterDescriptor PropertyName="StadiumCapacity"
                                          Operator="IsGreaterThan"
                                          Value="55000"/>
            <common:NumericalFilterDescriptor PropertyName="StadiumCapacity"
                                              Operator="IsLessThan"
                                              Value="85000"/>
    </common:CompositeFilterDescriptor.Descriptors>
</common:CompositeFilterDescriptor>

Delegate Filter Descriptor

The DelegateFilterDescriptor exposes the following property:

  • Filter: Gets or sets the IFilter implementation used to check whether a data item passes the filter or not.

To use a DelegateFilterDescriptor you need to create a class that implements the IFilter interface which will return the Key you want to filter by.

Then you need to add a DelegateFilterDescriptor to the RadDataGrid.FilterDescriptors collection and set its Filter property.

The CustomFilter implementation:

class CustomFilter : IFilter
{
    public bool PassesFilter(object item)
    {
        if ((item as Club).StadiumCapacity > 60000 && (item as Club).StadiumCapacity <85000)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
}

Adding the DelegateFilterDescriptor to the RadDataGrid:

grid.FilterDescriptors.Add(new DelegateFilterDescriptor() { Filter = new CustomFilter()});

Filtering UI

The filtering component(Filtering UI) appears when clicking the options icon (OptionsButton, three dots) on each column's header and it allows the user to easily filter data by column values.

OptionsButton opens the Filtering UI

The image below shows where the OptionsButton is placed

OptionsButton three dots opens filtering UI

Show/Hide OptionsButton

  • IsOptionsButtonVisible (bool) property indicated whether the OptionsButton is visible. The default value is true. The property could be set inside the DataGridColumnHeaderStyle.

OptionsButton three dots visibility

Example

<telerikGrid:DataGridTextColumn.HeaderStyle>
    <telerikGrid:DataGridColumnHeaderStyle BackgroundColor="LightSkyBlue" 
                                           IsOptionsButtonVisible="False"
                                           TextColor="Black"
                                           BorderColor="Black" 
                                           BorderThickness="2"/>
</telerikGrid:DataGridTextColumn.HeaderStyle>

Filtering UI

Here is how the Filtering UI looks:

Filtering UI

The Filtering UI exposes the following property:

  • UserFilterMode: Defines whether the Filtering UI is enabled/disabled. The available options are Auto/Enabled/Disabled. The default value of the UserFilterMode is Auto.

The following property is used to enable/disable the filtering of a specific column:

  • CanUserFilter (bool): Defines a value indicating whether the user can filter the column by using the Filtering UI.

The appearance of the Filtering UI can be customized by inheriting the DataGridFilterControlBase class. For more details on this check How to customize Filtering UI article.

FilterControl Template

From R2 2020 DataGrid allows you to apply filtering to the datagrid column using the FilterControlTemplate property.

  • FilterControlTemplate(DataTemplate): Specifies the user defined template used for Filtering UI. The template must contain an instance of the Telerik.XamarinForms.DataGrid.DataGridFilterControlBase class

Example using the TempateColumn

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

<telerikDataGrid:DataGridFilterControlBase xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="SDKBrowser.Examples.DataGridControl.FilteringCategory.FilterTemplateExample.PopulationFilter"
            xmlns:telerikDataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid">
    <StackLayout Margin="10"
                 Padding="10"
                 BackgroundColor="LightGray">
        <Picker x:Name="descriptorOperatorPicker"
                TextColor="Black" />
        <Entry x:Name="textEntry" />
    </StackLayout>
</telerikDataGrid:DataGridFilterControlBase>

public partial class PopulationFilter : DataGridFilterControlBase
{
    public PopulationFilter()
    {
        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.SelectedItem;

        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<TextOperator> GetOperators()
    {
        var operators = new List<TextOperator>
        {
            TextOperator.Contains,
            TextOperator.DoesNotContain,
            TextOperator.StartsWith,
            TextOperator.EndsWith,
        };
        return operators;
    }
}

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

2. Use the FilterControlTemplate property to specify the already created component as a filtering control to the template column.

<telerikDataGrid:RadDataGrid x:Name="dataGrid"
                             ItemsSource="{Binding GridSource}"
                             AutoGenerateColumns="False"
                             UserEditMode="Cell">
    <telerikDataGrid:RadDataGrid.Columns>
        <telerikDataGrid:DataGridNumericalColumn PropertyName="Population" />
        <telerikDataGrid:DataGridTemplateColumn HeaderText="City">
            <telerikDataGrid:DataGridTemplateColumn.CellContentTemplate>
                <DataTemplate>
                    <Label Text="{Binding Name}"/>
                </DataTemplate>
            </telerikDataGrid:DataGridTemplateColumn.CellContentTemplate>
            <telerikDataGrid:DataGridTemplateColumn.FilterControlTemplate>
                <DataTemplate>
                    <local:PopulationFilter PropertyName="Name"/>
                </DataTemplate>
            </telerikDataGrid:DataGridTemplateColumn.FilterControlTemplate>
        </telerikDataGrid:DataGridTemplateColumn>
    </telerikDataGrid:RadDataGrid.Columns>
</telerikDataGrid:RadDataGrid>

The ViewModel used in the example is declared as following:

public class FilteringViewModel
{
    public FilteringViewModel()
    {
        var source = new ObservableCollection<City>();
        source.Add(new City("Vratsa", 54150));
        source.Add(new City("Mexico City", 22000000));
        source.Add(new City("Trieste", 204849));
        source.Add(new City("Ottawa", 934243));
        source.Add(new City("Caracas", 1943901));
        source.Add(new City("Amsterdam", 851573));
        source.Add(new City("Pittsburgh", 305704));
        source.Add(new City("Athens", 664046));
        source.Add(new City("Taipei", 2704974));
        source.Add(new City("Marseille", 855393));
        source.Add(new City("Pnom Penh", 1501725));

        this.GridSource = source;

        this.TextOperatorSource = Enum.GetValues(typeof(TextOperator));
        this.NumericalOperatorSource = Enum.GetValues(typeof(NumericalOperator));
    }

    public ObservableCollection<City> GridSource { get; set; }
    public IList TextOperatorSource { get; set; }
    public IList NumericalOperatorSource { get; set; }
}

And the City custom object:

public class City
{
    public City(string name, int population)
    {
        this.Name = name;
        this.Population = population;
    }

    public string Name { get; set; }
    public int Population { get; set; }
}

You can review the FilterTemplateColumn example that shows how to achieve the functionality in the Examples/DataGrid/Filtering folder from the SDK Samples Browser application.

See Also

In this article
Related articles
Not finding the help you need? Improve this article