HomeGridFilter DataSearch Box
  • Overview
  • Grid Upd
    • Overview
    • Data Binding
    • Sort Data
    • Group Data
    • Edit Data
    • Filter Data Upd
      • Filter Row
      • Search Box New
      • Filter API New
    • Summary
    • Selection and Focus Upd
    • Master-Detail View
    • Templates
    • Columns
    • Save and Restore the Layout
    • Export Data New
    • Customization
    • Paging and Scrolling
  • Pivot Grid
  • Charts
  • Reports
  • Scheduler
  • Rich Text Editor Upd
  • Data Editors Upd
  • Buttons
  • Navigation and Layout Upd
  • File Management
Version: 22.2.4
Copyright © 2000-2023 Developer Express Inc

Search Box

  • Example
  • View Source
 
Country
Contact Name Company Name City
Country: Brazil
Anabela Domingues Tradição Hipermercados Sao Paulo
Country: Canada
Jean Fresnière Mère Paillarde Montréal
Country: Mexico
Ana Trujillo Ana Trujillo Emparedados y helados México D.F.

The DevExpress Blazor Grid ships with an integrated Search Box. Users can enter search strings/text within the Search Box to filter and highlight data.

Set the ShowSearchBox property to true to display the Search Box above column headers. If the group panel is visible, the Search Box is displayed within the group panel.

Use the SearchText property to specify 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).

If search text contains multiple words separated by space characters, words can be treated as a single condition or individual conditions. Set the SearchTextParseMode property to one of the following values to specify how the Grid control treats search words.

  • GroupWordsByAnd - Search words are treated as individual conditions grouped by the AND logical operator. Only records that match all conditions are displayed.
  • GroupWordsByOr - Search words are treated as individual conditions grouped by the OR logical operator. Records that match at least one of these conditions are displayed.
  • ExactMatch - Search words are not treated separately. Only records that match search text exactly are displayed.

Additionally, search text can include special characters. Special characters allow users to create composite criteria.

The Grid control attempts to locate search text in every visible data column. You can use the SearchEnabled property to exclude a specific column from search operations.

The following members allow you to customize Search Box functionality.

  • SearchBoxInputDelay - Specifies the time interval between the last character entered in the Search Box and subsequent search text update.
  • SearchBoxNullText - Specifies the prompt text displayed in the Search Box when it is empty.
  • CustomizeElement - Allows you to customize Search Box style settings.
  • SearchBoxTemplate - Allows you to implement custom content for the Search Box.
  • SearchText - Allows you to implement an external Search Box and bind its value to the grid search text.

For more information about our Blazor Data Grid and its built-in search capabilities, refer to the following topic: Search Box.

Did this demo address your needs?