DxGrid.SearchText Property

Specifies the text that the Grid uses to filter and highlight data.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public string SearchText { get; set; }

Property Value

Type	Default	Description
String	null	The search text.

Remarks

The Grid component can search text in visible data column cells, and filter and highlight search results.

Use the SearchText property to specify the search text in code. You can handle the SearchTextChanged event to respond to search text changes. The event is handled automatically when you use two-way data binding for the SearchText property (@bind-SearchText).

You can use the SearchText property to implement an external search editor for the Grid.

<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; }
}

If the search text contains multiple words separated by space characters, the words can be treated as a single condition or individual conditions based on the SearchTextParseMode property value.

Additionally, the search text can include special characters that allow users to create composite criteria. For more information about search in the Grid component, refer to the following topic: Search Box in Blazor Grid.

When the ShowSearchBox property is set to true, the Grid displays the search box. You can use the SearchText property to get the current search box value.

Run Demo: Grid - Search Box

Implements

SearchText