How to Filter a Table in Blazor Using .NET 6

Filtering is an essential aspect of any application. With the large amounts of data, it becomes necessary to filter out the important parts of data according to the use case. In ComponentOne Blazor FlexGrid, we can filter out the data by adding a search box or a filter row.

But in the 2021v3 release of ComponentOne, a new C1DataFilter control is introduced, providing UI for e-commerce like filters to accompany large data sets.

It offers various filters for different elements and can be connected with multiple Blazor controls like FlexGrid, FlexChart, ListView, etc. This control provides various filters like Boolean, range, date range, checklist filter, etc. These filters can be automatically generated by the control itself as well we can create our custom filters.

This article will look at how we can create filtering UI using C1DataFilter and the previous ways to implement filtering.

Before the C1DataFilter control was added, we could use a textbox for searching/filtering the FlexGrid using the FullTextFilterBehavior component.

The FilterString parameter of this component will be used as the search parameter, and the data containing this string will be filtered out. We can use the FilterString parameter to a different textbox to create a basic search box:

<p style="margin:8px 0">  
    <C1TextBox Class="filled-text-box" @bind-Text="filterText" Placeholder="Search Text" />  
</p>  

<FlexGrid ColumnHeaderStyle="@("background-color:#1565C0;color:#fff;font-size: 16px;")" ItemsSource="DataSource" AutoGenerateColumns="true">  
    <FlexGridBehaviors>  
        <FullTextFilterBehavior FilterString="@filterText" MatchNumbers="true" />  
    </FlexGridBehaviors>  
</FlexGrid>

In the above code snippet, the C1TextBox component is used as a search box, and its Text value is bound to the FilterString of FullTextFilterBehavior component.

filter

This type of filtering works, but it does not provide much customization for different columns and data types.

Filtering Using Filter Rows in FlexGrid

The Blazor FlexGrid also provides a filter row to filter/search each column based on some text. We can add a filter row using the GridFilterRow component. It will automatically add text boxes for each column, and typing any text in these will automatically filter the data.

<FlexGrid ColumnHeaderStyle="@("background-color:#1565C0;color:#fff;font-size: 16px;")" ItemsSource="DataSource" AutoGenerateColumns="true">  
    <FlexGridRows>  
        <GridFilterRow Placeholder="Search" AutoComplete="true" />  
    </FlexGridRows>  
</FlexGrid>

fitler

This has an advantage over the search box method because we can search individual columns. Still, it also doesn't provide better filtering options like selecting multiple values, filtering between a range, etc.

Filtering Using C1DataFilter

The new C1DataFilter control provides a range of customizations for filtering the data, including ranges for numbers, selecting a single or multiple values, ranges for date and time, and an option to create custom filters.

C1DataFilter can be used with multiple controls, not only FlexGrid, like ListView, FlexChart, TreeMap, etc., which provides a significant advantage over the previous methods.

For creating a filtering UI using C1DataFilter, we need to pass the data source to the C1DataFilter component. It will automatically create the UI and the desired filter types for different data types.

<C1DataFilter @ref="theFilter" ItemsSource="@DataSource"></C1DataFilter>

Now, we need to bind the same data source as the source of the FlexGrid so that the data is updated according to the filter:

<FlexGrid @ref="theGrid"  ItemsSource="@DataSource" AutoGenerateColumns="true"></FlexGrid>

The result will be something similar:

filter

Notice how C1DataFilter displays different filter editors for various data types. Due to this, the filtering becomes more robust and user-friendly.

Custom Filtering Using C1DataFilter

As said earlier, we can also create custom filters using C1DataFilter. It provides various filtering classes like CustomFilter, CheckboxFilter, etc., which can be inherited to create custom filters. We have created custom filters for the Model, Price, and Automatic Transmission property in this example.

The code for the custom filter is too big for this article, but you can find it in the sample link at the end of this article.

We can expose the custom filters by converting them into razor components and adding them inside the C1DataFilter.

<C1DataFilter ItemsSource="@DataSource"  
                      AutoGenerateFilters="false"  
                      Style="@("max-height: inherit;")"  
                      >  
            <DataFilters>  
                <PriceFilter PropertyName="Price" HeaderText="Price" PriceIntervals="@priceIntervals" />  
                <ModelFilter PropertyName="Model" CarModels="@carsModels" HeaderText="Model" />  
                <TransmissionFilter PropertyName="TransmissAutomatic" HeaderText="Automatic transmission" />  
            </DataFilters>  
</C1DataFilter>

The PriceFilter, ModelFilter, and TransmissionFilter are custom filter components.

filter