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

    Filter row feature enables users to filter the grid data by column as they type. It uses FlexGrid's GridFilterRow class which represents a row, added below the header, whose cells are text boxes used to filter the corresponding column.

    You can also use properties of the GridFilterRow class like MatchCaseMatchWholeWordDelay, AutoComplete, and others to enhance the filter row operation.

    The GIF below demonstrates a filter row that lets you type the value you want to search and filter the column data accordingly.

    Filter Row 

    The following code example can be used to implement the filter row feature in FlexGrid.

    Razor
    Copy Code
    @page "/FlexGrid/FilterRow"
    @using Localization
    @using System.Collections.ObjectModel;
    @using C1.Blazor.Grid
      
    <FlexGrid ItemsSource="customers" HeadersVisibility="GridHeadersVisibility.All" FrozenRows="1" Style="@("max-height:50vh")">
         <FlexGridRows>
             <GridFilterRow Placeholder="@FlexGridRes.FilterPlaceholderText" AutoComplete="true" />
         </FlexGridRows>
     </FlexGrid>
    
     @code
    {
         ObservableCollection<Customer> customers;
      
         protected override void OnInitialized()
         {
             customers = Customer.GetCustomerList(100);
         }
      
     }
    
    Note: When AutoComplete property is set true, the typed text is auto-completed from the data in the grid. This setting is not recommended when using data-virtualized sources, as it requires iterating all the data.