FlexGrid for WPF | ComponentOne
Features / Data Filtering / Filter Data using FlexGridFilter
In This Topic
    Filter Data using FlexGridFilter
    In This Topic

    FlexGrid provides Excel-like filtering feature to filter data through drop down icons in column headers. This functionality is available in FlexGrid through a separate control called FlexGridFilter, which is implemented through an extender assembly, C1.WPF.FlexGridFilter. Once the FlexGridFilter control is added, the grid displays a drop-down icon on hovering the column headers. The drop-down icon shows an editor that allows users to specify filters on columns. Users may choose between the two types of filters:

    Note: Filtering using FlexGridFilter is only availabe in .NET 4.5.2 version. 

    The images below show the filters displayed on clicking the drop-down icon.

    To enable filtering through FlexGridFilter

    You can enable filtering in FlexGrid by manually adding the C1.WPF.FlexGridFilter assembly to your project, creating an object of the C1FlexGridFilter class, and attaching this object to an existing FlexGrid object as illustrated in the following code.
    <c1:C1FlexGrid Name="grid" >
      <!-- add filtering support to the control: -->
      <c1:C1FlexGridFilterService.FlexGridFilter>
        <c1:C1FlexGridFilter />
      </c1:C1FlexGridFilterService.FlexGridFilter>
    </c1:C1FlexGrid>
    
    // create a FlexGrid
    var grid = new C1FlexGrid();
    //enable filtering through FlexGridFilter
    var gridFilter = new C1FlexGridFilter(grid);
    

    To select filter mode

    The filter operates in two modes depending on the value of the UseCollectionView property. If the UseCollectionView property is set to false, rows that do not satisfy the filter are hidden (the filter sets their Visible property to false). In this mode, the filter has no effect on the row count. You can use this mode in bound and unbound grids.

    If the filter's UseCollectionView property is set to true, the filter gets applied to the data source. In this mode, changes to the filter affect the number of items exposed by the data source to the grid and to any other controls bound to the same data source. This filtering mode can only be used in bound grids.

    <c1:C1FlexGrid Name="grid" >
      <!-- add filtering support to the control: -->
      <c1:C1FlexGridFilterService.FlexGridFilter>
        <c1:C1FlexGridFilter UseCollectionView=”True”/>
      </c1:C1FlexGridFilterService.FlexGridFilter>
    </c1:C1FlexGrid>
    
    // create C1FlexGrid
    var grid = new C1FlexGrid(); 
    
    // enable filtering on the grid
    var gridFilter = new C1FlexGridFilter(grid);
    
    // filter at the data source level
    gridFilter.UseCollectionView = true;
    

    To customize filter type for each column

    By default, filters are enabled for every column. Columns that contain Boolean or enumerated data get a value filter, and columns that contain other data types get value and condition You can use the FilterType property to change this behavior and specify the type of filter to enable for each column.

    Specifying the filter type is important in scenarios where columns have a large number of unique values or when columns contain bindings that do not work with the filters. For example, columns containing images cannot be filtered with value or condition filters. In this case, you would disable the filter by setting the FilterType property to None.

    A grid containing several thousand items may have a unique ID column, which adds too many items to the value filter, making it slow and not very useful. In this case, disable the value filter by setting the FilterType property to Condition.

    The code below shows how to accomplish this:

    C#
    Copy Code
    // create C1FlexGrid
    var grid= new C1FlexGrid();
    
    // enable filtering on the grid
    var gridFilter = new C1FlexGridFilter(grid);
    
    // disable filtering on the Image column
    var columnFilter = gridFilter.GetColumnFilter(flex.Columns[“Image”]);
    columnFilter.FilterType = FilterType.None;
    
    // disable value filtering on the ID column
    columnFilter = gridFilter.GetColumnFilter(flex.Columns[“ID”]);
    columnFilter.FilterType = FilterType.Condition;
    

    To specify filter type in code

    In most cases, users set the filters. But the ColumnFilter class exposes a full object model that enables developers to customize filter conditions through code. For example, the code below applies a filter to the second column. The filter causes the grid to show items where the value in the second column contains the letter Z:

    C#
    Copy Code
    // create C1FlexGrid
    var grid = new C1FlexGrid();
    
    // enable filtering on the grid
    var gridFilter = new C1FlexGridFilter(grid);
    
    // get filter for the first column
    var columnFilter = gridFilter.GetColumnFilter(grid.Columns[0]);
    
    // create filter condition (Contains ‘Z’)
    var condition = columnFilter.ConditionFilter.Condition1;
    condition.Operator = ConditionOperator.Contains;
    condition.Parameter = "Z";
    
    // apply the filter 
    gridFilter.Apply();
    

    To persist filters

    The C1FlexGridFilter class contains a FilterDefinition property that gets or sets the current filter state as an XML string. You can use this string to persist the filter state when the user quits the application, so that it can be restored later. You may also save several filter definitions, and allow the user to select and then customize these pre-set filters. You can also save and restore filter definitions to streams using the SaveFilterDefinition and LoadFilterDefinition methods.

    Note: The C1.WPF.FlexGridFilter extender assembly is shipped separately with FlexGrid due to following reasons:

    • To minimize the footprint of FlexGrid assembly.
    • To provide complete flexibility in choosing extensions.
    • To extend the functionality of the C1FlexGrid class through custom codes.
    See Also