Grid View Search Panel

• Nov 29, 2023
• 6 minutes to read

The Search Panel allows end users to type filter criteria in the panel editor to locate data. The search results are highlighted.

Set the Visible property to true to display the search panel. To access the panel settings, use the SettingsSearchPanel property.

The Delay property specifies the time period after which the search panel’s filter criteria is automatically applied to the control. To disable the time delay, set the AllowTextInputTimer property to false. In this case, the grid does not apply filter criteria automatically. A user can click the Apply (Search) button or press the Enter key to apply the criteria.

Set the ShowApplyButton and ShowClearButton properties to true to display the Apply and Clear buttons.

Apply a search panel filter in code

You can apply a search panel filter in code on the server side using the SearchPanelFilter property or on the client side using the ApplySearchPanelFilter(value) method.

Note that the SearchPanelFilter property and the ApplySearchPanelFilter(value) method are in effect even if the search panel is disabled (the Visible property is set to false).

// On the server side
Grid.SearchPanelFilter = "big";

' On the server side
Grid.SearchPanelFilter = "big"

// On the client side
grid.ApplySearchPanelFilter('big');

<dx:ASPxGridView ID="Grid" runat="server">
    <SettingsSearchPanel Visible="true" ShowApplyButton="True" ShowClearButton="True" />
</dx:ASPxGridView>

Specify the columns to which the control applies the search panel filter

ASPxGridView applies the search panel filter to all visible data columns (the default setting).

Use the ColumnNames property to specify columns to which the filter should be applied. The property lists column identifiers that can be either: a column name (WebColumnBase.Name), field name (GridViewDataColumn.FieldName), or caption (WebColumnBase.Caption).

Web Forms:

<dx:ASPxGridView ID="Grid" runat="server">
    <SettingsSearchPanel Visible="true" ShowApplyButton="True" ShowClearButton="True"
        ColumnNames="ContactName; CompanyName" />
    <%--...--%>
</dx:ASPxGridView>

MVC:

@Html.DevExpress().GridView(settings => {
    settings.Name = "grid";
    settings.SettingsSearchPanel.Visible = true;
    settings.SettingsSearchPanel.ShowApplyButton = true;
    settings.SettingsSearchPanel.ShowClearButton = true;
    settings.SettingsSearchPanel.ColumnNames = "ContactName; CompanyName";
    ...
}).Bind(Model).GetHtml()

Set the column’s AllowFilterBySearchPanel property to false to exclude a specific column from the filter.

<dx:ASPxGridView ID="Grid" runat="server" AutoGenerateColumns="False">
    <Columns>
        <dx:GridViewDataTextColumn FieldName="ContactName" />
        <dx:GridViewDataTextColumn FieldName="CompanyName">
            <Settings AllowFilterBySearchPanel="False" />
        </dx:GridViewDataTextColumn>
        <%--...--%>
    </Columns>
    <SettingsSearchPanel Visible="true" ShowApplyButton="True" ShowClearButton="True" />
</dx:ASPxGridView>

Replace the default search panel editor with a custom one

ASPxGridView allows you to use a custom editor instead of the default search panel. You can use one of the following techniques:

• Specify a DevExpress editor in the SearchPanelEditorCreate event handler (EditorProperties).

  

  • ASPX

  <dx:ASPxGridView ID="Grid" runat="server" OnSearchPanelEditorCreate="Grid_SearchPanelEditorCreate">
      <SettingsSearchPanel Visible="true" ShowApplyButton="True" ShowClearButton="True" />
      <%--...--%>
  </dx:ASPxGridView>
  

  • C#
  • VB.NET

  protected void Grid_SearchPanelEditorCreate(object sender, DevExpress.Web.ASPxGridViewSearchPanelEditorCreateEventArgs e) {
      e.EditorProperties = new SpinEditProperties();
  }
  

• Use the CustomEditorID property to specify an external DevExpress editor.

  

  • ASPX

  <dx:ASPxGridView ID="Grid" runat="server">
      <SettingsSearchPanel CustomEditorID="ASPxTextBox1" />
      <%--...--%>
  </dx:ASPxGridView>
  
  <dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px">
  </dx:ASPxTextBox>
  

Search syntax

In its simplest form, a search criterion consists of a single word. However, the search panel allows you to create composite criteria.

Limitations

• Search results contained in templates are not highlighted automatically, but you can highlight these results manually. For more information, refer to the following example: View Example: ASPxGridView - Search Panel - How to highlight the text placed inside a DataItem template

• When grid text contains HTML tags and the EncodeHtml property is set to false, the search panel highlight feature may break the current HTML structure. You can either disable the HighlightResults property or specify the DataItemTemplate property for this column, and manually prevent highlighting if the entered text contains HTML tags.

• Searches executed with a Search Panel are case insensitive.

• Searches using the search panel for case-sensitive data sources in Server Mode are not supported. The search panel always converts a search string to lower-case before searching.