Lesson 7 - Filter Data

The GridControl supports an automatic filtering functionality that displays a subset of data records, which meet a particular criteria. You can filter data against single or multiple columns.

To apply a filter to a column, use the GridColumn.AutoFilterValue property. The type of the comparison operator used to create filter conditions for the current column is specified by the GridColumn.AutoFilterCondition property. You can also use the GridControl.FilterExpression and GridControl.FilterString property to specify a grid filter expression.

End-users can filter data by columns using the auto-filter panel.

Open the HelloGrid solution created in Lesson 6 of the current Getting Started tutorial and configure the auto-filter panel for the grid.

<dxGrid:GridControl x:Name="grid" ItemsSource="{Binding Orders}" 
                   NewItemRowVisibility="true" 
                    CalculateCustomSummary="OnCalculateCustomSummary" 
                    SortMode="Multiple" AutoFilterPanelVisibility="true">
    <dxGrid:GridControl.Columns>
        <!-- ... -->
        <dxGrid:SwitchColumn FieldName="Shipped" AllowSort="False" AllowAutoFilter="false"/>
    </dxGrid:GridControl.Columns>
</dxGrid:GridControl>

As a result, an auto-filter panel is displayed at the top of the grid. When an end-user types text into this panel’s cell, data is filtered on the fly by values of the corresponding column.

After a filter has been applied, the filter panel appears by default at the bottom of the grid. This panel displays a string that represents a filter criteria currently applied in the grid (GridControl.ActualFilterString) and contains buttons allowing end-users to disable/enable and clear the filter. You can control the visibility of this panel using the GridControl.FilterPanelVisibility property.

Grid_GettingStarted_Lesson7_Result_iOS

Grid_GettingStarted_Lesson7_Result_Android_Dark