How to Filter a Blazor Table Control using .NET

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

Additionally, we can provide more advanced filtering using the ComponentOne DataFilter control. The C1DataFilter provides a side-bar UI for filters similar to popular e-commerce websites.

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.

Ready to Try It Out? Download ComponentOne Today!

This article will look at the different ways to filter the Blazor datagrid using a search box, a filter row, and the C1DataFilter control by:

• How to Filter Using a Search Box

• How to Filter Using a Filter Row

• How to Filter Using C1DataFilter

How to Filter Using a Search Box

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.

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

How to Filter Using a Filter Row

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>  

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.

How to Filter Using C1DataFilter

The new C1DataFilter control provides a range of customizations for filtering the data, including ranges for numbers, selecting 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:

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.

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.

This article introduced the C1DataFilter component and showed how it adds additional filtering features for your Blazor applications. You can try it yourself by downloading ComponentOne Blazor Edition to find samples or download the C1.Blazor.DataFilter NuGet package.

Ready to Try it Out? Download ComponentOne Today!