Blazor Grid — Search Box (v22.2)

Our Blazor Data Grid component ships with a new case-insensitive search option (Search Box). When users enter text within the Search Box, our Blazor Data Grid filters data rows, displays matching records, and highlights search results. Additional features include:

• Support for special characters.
• Configurable input delay.
• Search box placeholder (null text) support.
• Ability to exclude specific columns from search operations.
• Built-in search text parse modes.
• Ability to specify search text in code (Search API).
• Customizable Search Box appearance settings.

Search Box UI

Set the ShowSearchBox property to true to incorporate the Search Box within your DevExpress-powered Blazor app. Once enabled, users can enter text within the editor to filter data and highlight search results in the grid.

<DxGrid Data="Data" ShowSearchBox="true">
    <Columns>
        <DxGridDataColumn FieldName="ContactName"/>
        <DxGridDataColumn FieldName="City"/>
        <DxGridDataColumn FieldName="Country"/>
    </Columns>
</DxGrid>

If the group panel is visible, the Search Box and group panel are displayed in the same top panel.

The DevExpress Blazor Grid allows you to customize its built-in search-specific UI. You can:

• Handle the CustomizeElement event to change Search Box settings and associated appearance.
• Specify the SearchBoxTemplate property to replace the content of the Search Box container.

To explore Search Box-related capabilities in greater detail, feel free to review the following online demo: Search Box.

The DevExpress Blazor Grid uses the same search syntax as DevExpress Data Grids on other platforms.

Search is case insensitive. Our Blazor Grid control looks for search text in every visible column cells. Set a column’s SearchEnabled property to false to exclude a specific column from search operations.

If search text contains multiple words separated by space characters, the words can be treated as a single condition or individual conditions grouped by the OR/AND logical operator (based on the the SearchTextParseMode property value).

Search text can include special characters. These special characters allow users to create composite criteria: add required and optional conditions, search against a specific column, specify comparison operators, or use wildcard masks. For more information in this regard, please review the following help section: Search Syntax.

To help search text in code, our Blazor Grid exposes the following API:

• SearchText property: specifies the text used to filter and highlight data.
• SearchTextChanged event: fires when search text changes.

This API allows you to apply search criteria even if the Search Box is not visible. You can also use these members to implement a standalone search-related interface.

<div class="d-flex py-2">
    <DxTextBox @bind-Text="SearchText" />
    <DxButton Text="Apply" Click="() => GridSearchText = SearchText" CssClass="mx-2" />
</div>
<DxGrid Data="Data" SearchText="@GridSearchText">
    <Columns>
        <DxGridDataColumn FieldName="CompanyName" />
        <DxGridDataColumn FieldName="ContactName" />
        <DxGridDataColumn FieldName="City" />
        <DxGridDataColumn FieldName="Country" />
    </Columns>
</DxGrid>
@code {
    object Data { get; set; }
    string SearchText { get; set; }
    string GridSearchText { get; set; }
    // ...
}

Your Feedback Counts

As always, we appreciate your feedback.

Free DevExpress Products - Get Your Copy Today