Filtering Data (using C1FlexGridFilter)

The C1FlexGrid ships with “extender assemblies” called C1.Silverlight.FlexGridFilter (and C1.WPF.FlexGridFilter) that provide Excel-style filtering. To use these assemblies, add them to your project and then create a C1FlexGridFilter object attached to an existing grid. For example:

// create C1FlexGrid
var flex = new C1FlexGrid();

// enable filtering on the grid
var gridFilter = new C1FlexGridFilter(flex);

The decision to use extender assemblies instead of adding the functionality directly to the control has two reasons:

1) It allows us to keep grid assembly small. Developers can choose which extensions they want to use with each project (additional extender assemblies are currently under development).

2) We will provide the source code for the extender assemblies so developers can customize them if they want.

You can also enable filtering in the XAML file where the grid is declared. The syntax for that is shown below:

<c1:C1FlexGrid Name="_flex" >

  <!-- add filtering support to the control: -->
  <c1:C1FlexGridFilterService.FlexGridFilter>
    <c1:C1FlexGridFilter />
  </c1:C1FlexGridFilterService.FlexGridFilter>

</c1:C1FlexGrid>

Once filtering is enabled, the grid will display a drop-down icon when the mouse is over the column headers. The drop-down shows an editor that allows users to specify how the data should be filtered on the column. Users may choose between two types of filter:

1) Value filter: This filter allows users to select the values that should be displayed from a list.

2) Condition filter: This filter allows users to specify two conditions composed of an operator (greater than, less than, etc) and a parameter. The conditions themselves are combined with an AND or an OR operator.

The image below shows what the filters look like while being edited:

Value Filter: Users create the filter by selecting values from a list.

Condition Filter: Users create the filter by setting one or two conditions.

The default filter settings should be adequate for most applications, but you may customize the filter in several ways.

Selecting the filter mode
The filter operates in two modes, determined by the setting of the UseCollectionView property.

If you set the filter's UseCollectionView to false, rows that do not satisfy the filter are hidden (the filter sets their Visible property is set to false). In this mode, the filter has no effect on the row count. This mode can be used in bound and unbound grids.

If you set the filter's UseCollectionView property to true, then the filter is applied to the data source instead (using the ICollectionView.Filter property). 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 mode can only be used in bound mode.

For example:

// create C1FlexGrid
var flex = new C1FlexGrid();

// enable filtering on the grid
var gridFilter = new C1FlexGridFilter(flex);

// filter at the data source level
gridFilter.UseCollectionView = true;

Or, in XAML:

<c1:C1FlexGrid Name="_flex" >

  <!-- add filtering support to the control: -->
  <c1:C1FlexGridFilterService.FlexGridFilter>
    <c1:C1FlexGridFilter UseCollectionView=”True”/>
  </c1:C1FlexGridFilterService.FlexGridFilter>

</c1:C1FlexGrid>

Customizing the 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 filters.

You may use the FilterType property to change this behavior and specify the type of filter that should be enabled 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 don’t work with the filters.

For example, columns containing images cannot be filtered Value or Condition filters. In this case, you would disable the filter by setting the FilterType property to None.

Or a grid containing several thousand items could have a unique ID column, which would add too many items to the Value filter, making it slow and not very useful. In this case you would disable the value filter by setting the FilterType property to Condition.

The code below shows how you would accomplish this:

// create C1FlexGrid
var flex = new C1FlexGrid();

// enable filtering on the grid
var gridFilter = new C1FlexGridFilter(flex);

// 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;

Specifying filters in code
In most cases, filters are set by the users. But the ColumnFilter class exposes a full object model that allows developers to examine and modify the filter conditions using 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”:

// create C1FlexGrid
var flex = new C1FlexGrid();

// enable filtering on the grid
var gridFilter = new C1FlexGridFilter(flex);

// get filter for the first column
var columnFilter = gridFilter.GetColumnFilter(flex.Columns[0]);

// create filter condition (Contains ‘Z’)
var condition = columnFilter.ConditionFilter.Condition1;
condition.Operator = ConditionOperator.Contains;
condition.Parameter = "Z";

// apply the filter 
gridFilter.Apply();

Persisting filters
The C1FlexGridFilter class contains a FilterDefinition property that gets or sets the current filter state as an XML string. This string can be used to persist the filter state when the user quits the application, so 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. Filter definitions may also be saved and restored to streams using the SaveFilterDefinition and LoadFilterDefinition methods.