Blazor | ComponentOne
Controls / FlexGrid / Data Operations / Filtering / Full Text Filtering
In This Topic
    Full Text Filtering
    In This Topic

    Full-text filtering is the simplest way to filter FlexGrid. You need to bind a text box to the FlexGrid’s FullTextFilterBehavior and get instant filtering that can match exact case, partial text or whole words across all columns of the grid. This can be implemented using MatchCaseMatchNumbers and MatchWholeWord properties to give you more specific values.

    You can also use Highlightstyle property to set the highlight style to the filtered data. This feature helps in distinguishing the filtered data from other values in the grid.

    This GIF below demonstrates a simple text box that lets you type the value you want to search in the grid. Here, when you type Jack in the Filter text box, it filters the grid data to display all the values containing 'Jack'.

    Searchbox filtering

    The following code example demonstrates how to apply full text filtering with 'match case' and 'match word' options in FlexGrid.

    Razor
    Copy Code
    @page "/FlexGrid/FullTextFilter" 
    @using System.Collections.ObjectModel;
    @using C1.Blazor.Input
    @using C1.Blazor.Grid
    
    <p style="margin:8px 0">
        <C1TextBox Class="filled-text-box" @bind-Text="filterText" Placeholder="Enter text to filter" />
    </p>
    <FlexGrid ItemsSource="customers" Style="@("max-height:50vh")">
        <FlexGridBehaviors>
            <FullTextFilterBehavior FilterString="@filterText" MatchCase="@(matchCase??false)" MatchWholeWord="@(matchWholeWord??false)" MatchNumbers="true" HighlightStyle="@("#B00F50")" />
        </FlexGridBehaviors>
    </FlexGrid>
    @code {
        string filterText = "";
        bool? matchCase = false;
        bool? matchWholeWord = false;
        ObservableCollection<Customer> customers;
        protected override void OnInitialized()
        {
            customers = Customer.GetCustomerList(100);
        }
    }