Blazor | ComponentOne
Controls / FlexGrid / Data Operations / Filtering / Custom Column Filter
In This Topic
    Custom Column Filter
    In This Topic

    FlexGrid provides built-in filtering support with the help of column filters. However, there might be a scenario where you would want to apply your own custom filtering. For instance, you may want to filter DateTime, Numeric, String, and more values based on custom criteria. Custom filtering in a Flexgrid control can be done using different approaches based on either conditions or specific values. Custom filtering using conditions involves applying logical conditions or rules to determine whether a row should be included or excluded from the filtered dataset. On the other hand, custom filtering using values involves specifying exact values that should be included or excluded in the filtered dataset. This method usually involves selecting from a list of possible values for a given column. Let us take you through the steps of creating custom column filters on the basis of condition and values.
    1. Add a new Razor component named CustomFiltersComponent.razor to add DataFilter and create the custom filters, value filter and custom filter along with the built-in filters. The Value filter contains a checkbox list of values present in a column whose data is supposed to be filtered. User can select the values that are required to be displayed in the filtered output. The condition filter lets you specify a combination of two conditions such as "equals", "greater than", "contains" etc. This allows user to combine the specified conditions using "And" and "Or" operator and filter
    2. Bind the FlexGrid control with the data from the Customer class using the ItemsSource property. The Customer class (available in the BlazorExplorer product sample) displays details of customers. In addition, apply the custom filter created in the above step on the Country column to filter countries based on either values or conditions..
      Home.razor
      Copy Code 
      @using System.Collections.ObjectModel;
@using C1.Blazor.Core
@using C1.Blazor.Input
@using C1.Blazor.Grid
@using C1.Blazor.Menu
@using C1.DataCollection
@using FlexGrid_CustomFilter.Data

<FlexGrid ItemsSource="@customers" MinColumnWidth="85" AutoGenerateColumns="false" IsVirtualizationEnabled="false" Style="@("max-height:75vh")">
    <FlexGridColumns>
        <GridColumn Binding="@nameof(Customer.Active)" MinWidth="70" Width="new GridLength(0.5, GridUnitType.Star)" HorizontalAlignment="C1HorizontalAlignment.Center" />
        <GridColumn Binding="@nameof(Customer.FirstName)" MinWidth="110" Width="GridLength.Star" />
        <GridColumn Binding="@nameof(Customer.LastName)" MinWidth="110" Width="GridLength.Star" />
        <GridColumn Binding="@nameof(Customer.CountryId)" Header="Country" MinWidth="110" Width="GridLength.Star" DataMap="countryDataMap" AllowFiltering="false" OptionsLoading="OnGridColumnOptionsLoading" />
        <GridDateTimeColumn Binding="@nameof(Customer.LastOrderDate)" Format="d" Mode="GridDateTimeColumnMode.Date" MinWidth="160" Width="GridLength.Star" HorizontalAlignment="C1HorizontalAlignment.Right" HeaderHorizontalAlignment="C1HorizontalAlignment.Right" />
        <GridDateTimeColumn Binding="@nameof(Customer.LastOrderDate)" AllowFiltering="false" SortMemberPath="LastOrderTime" Format="t" Mode="GridDateTimeColumnMode.Time" Header="Last Order Time" MinWidth="150" Width="GridLength.Star" HorizontalAlignment="C1HorizontalAlignment.Right" HeaderHorizontalAlignment="C1HorizontalAlignment.Right" />
        <GridNumericColumn Binding="@nameof(Customer.OrderTotal)" Format="C" Minimum="0" MinWidth="110" Width="GridLength.Star" HorizontalAlignment="C1HorizontalAlignment.Right" HeaderHorizontalAlignment="C1HorizontalAlignment.Right" InputType="TextBoxType.Number" />
    </FlexGridColumns>
</FlexGrid>

@code {
    C1DataCollection<Customer> customers;
    GridDataMap countryDataMap = new GridDataMap() { ItemsSource = Customer.GetCountries(), DisplayMemberPath = "Value", SelectedValuePath = "Key" };

    protected override void OnInitialized()
    {
        customers = new C1DataCollection<Customer>(Customer.GetCustomerList(100));
    }

    async void OnGridColumnOptionsLoading(object sender, GridColumnOptionsLoadingEventArgs a)
    {
        var menu = await a.Menu;

        var filterValues = Customer.GetCountries();
        menu.MenuItems.Add(new C1MenuSeparator());
        menu.MenuItems.Add(new C1MenuItem
            {
                HeaderTemplate = builder =>
                {
                    builder.OpenComponent<CustomFiltersComponent>(0);
                    builder.AddAttribute(1, nameof(CustomFiltersComponent.Source), customers);
                    builder.AddAttribute(2, nameof(CustomFiltersComponent.PropertyName), nameof(Customer.CountryId));
                    builder.AddAttribute(3, nameof(CustomFiltersComponent.FiltersValues), filterValues);
                    builder.CloseComponent();
                }
            });

        menu.Refresh();
    }

}