Skip to main content

Step 4: Enable Search Panel

  • 2 minutes to read

You should enable data operations after binding the GridControl to a virtual source.

In this step, we describe how to enable the search panel.

VirtualSourcesAdvancedTutorialSearching

Note

The Issues Service is used as an example of a data source in this tutorial.

Enable Search Panel

  1. Display the search panel by setting the DataViewBase.ShowSearchPanelMode property to Always:

    <dxg:TableView ShowSearchPanelMode="Always" />
    
  2. Convert a text entered in the search panel to a CriteriaOperator to allow the virtual source to apply a filter:

    <dxg:TableView ShowSearchPanelMode="Always" SearchStringToFilterCriteria="OnSearchStringToFilterCriteria" />
    
    void OnSearchStringToFilterCriteria(object sender, SearchStringToFilterCriteriaEventArgs e) {
        if(!string.IsNullOrEmpty(e.SearchString))
            e.Filter = new BinaryOperator("Tags", e.SearchString.Trim().ToLower(), BinaryOperatorType.Equal);
        e.ApplyToColumnsFilter = true;
    }
    
  3. (Skip this step if you set the ApplyToColumnsFilter property to false.) You can now use the drop-down filter and search panel to filter by tags. If you use the drop-down filter to apply a filter, the search panel’s text is not updated. You need to make the search panel detect changes in the drop-down filter:

    <dxg:GridControl x:Name="grid" FilterGroupSortChanging="OnFilterGroupSortChanging" />
    
    void OnFilterGroupSortChanging(object sender, FilterGroupSortChangingEventArgs e) {
        e.SplitColumnFilters.TryGetValue("Tags", out CriteriaOperator tagsFilter);
        e.SearchString = tagsFilter.Match(binary : (propertyName, value, type) => {
            if(propertyName != "Tags" || type != BinaryOperatorType.Equal)
                throw new InvalidOperationException();
            return (string)value;
        });
    }
    

    As a result, the drop-down filter and the search panel are synchronized.

Continue or Review