Filtering FlexGrid

C1FlexGrid for Silverlight and WPF now features Excel-like column filtering services. We've added this feature to the latest prerelease version of the control, and here is how it works. To use the new C1FlexGrid filtering feature, follow these steps:

  1. Download version 4.0.20103.103 or higher and update your local copies of the C1FlexGrid assmblies. - Download Silverlight version - Download WPF version
  2. Add the C1.Silverlight.FlexGridFilter (or C1.WPF.FlexGridFilter) extension assembly to your project.
  3. Add the C1FlexGridFilter object to a new or existing C1FlexGrid control. This will add filtering support to the grid.


<c1:C1FlexGrid x:Name="c1FlexGrid1">  
    <!-- use C1FlexGridFilterService to add the filter -->  
        <c1:C1FlexGridFilter  />  

Once the filter is added, moving the mouse over column headers will show a dropdown button that invokes the filter editor. The user may set the filter by selecting values that should be displayed or by specifying conditions that must be met by the values in the column. After a filter is applied the arrow becomes a checkmark, indicating that the column has a filter applied to it. The C1FlexGridFilter operates in two modes for bound and unbound grids. This is determined by setting the UseCollectionView property. If you set UseCollectionView to false, rows that do not satisfy the filter are hidden (row.Visible = false). In this mode, the filter has no effect on the row count and this mode can be used in bound or unbound grids. If you set UseCollectionView to true, then the filter is applied to the source ICollectionView object instead. 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 only works in bound mode. The C1FlexGridFilter also has a unique API for managing filters in code. The following code initializes a FlexGridFilter completely in code:

C1FlexGridFilter _filter = new C1FlexGridFilter(c1FlexGrid1);  

Or the following code gets the C1FlexGridFilter which may have been created in XAML:

var _filter = C1FlexGridFilterService.GetFlexGridFilter(c1FlexGrid1);  

We can apply filters on any column in code too. The following code applys a value filter on one column.

// customize color column filter to show only Blue  
var c = c1FlexGrid1.Columns["Color"];  
var cf = _filter.GetColumnFilter(c);  
cf.FilterType = FilterType.Value;  
cf.ValueFilter.Values = new string[] { "Blue" };_filter.Apply();  

The following code specifies a conditional filter.

// customize price column filter  
var c = c1FlexGrid1.Columns["Price"];  
var cf = _filter.GetColumnFilter(c);  

//clear Value Filter  

var c1 = cf.ConditionFilter.Condition1;  
c1.Operator = ConditionOperator.IsGreaterThanOrEqualTo;  
c1.Parameter = 900.5;  

// apply changes  

The FilterApplied method is fired after a filter is performed. You can even save and load filters using the C1FlexGridFilter.FilterDefinition property. This property stores the filter definition as an XML string.


We chose to add the filtering feature as an extension (ie in a separate assembly) to keep the base C1FlexGrid assembly lightweight. With this filtering feature you can easily enable Excel-style filtering in your bound and unbound grids. Download the prerelease bits and try it today. Also, download the 'ColumnFilter' sample project for more details and usage examples.

ComponentOne Product Manager Greg Lutz

Greg Lutz

comments powered by Disqus