A Guide to Filtering a WPF DataGrid Using FlexGrid

Our flexible WPF datagrid, FlexGrid, supports many ways to filter data. This blog explores all supported filtering features to help you best decide which to implement in your application. We'll dive into the options below, including:

• Column Filter
• Filter Row
• Full-Text Filter
• Datafilter
• FilterEditor
• Custom Filtering

Ready to get started? Download ComponentOne Today!

Column Filter – Set Search Criteria in the Column Header

One of the most basic ways to filter data in FlexGrid is the column filter. The C1FlexGridFilter extension class extends the C1FlexGrid to provide Excel-style column filtering. Once column filtering is enabled, moving the mouse over the column headers shows a drop-down button that can be used to edit the filter applied to the column.

The filter supports two modes:

• Value Mode: The editor displays a list containing all the values present in the column. Users may use the list to select one or more values to be displayed.
• Condition Mode: The editor displays two conditions consisting of an operator and a comparison parameter (e.g., 'greater than' and '2.5'). The conditions are combined with an 'and' or an 'or' operator.

This type of filter is particularly useful when applied to a column with few options for data entry variation. For example, with a FlexGrid displaying a list of products that contain a name, color, and price, you can select a column to apply a column filter to only show entries that are priced over a set amount from the “Price” column. You can also set a column filter to display only products by a specific color, based on the “Color” column. These filters can be applied via the designer or programmatically.

• Pros: Easy to utilize, implement, and understand

• Cons: Limited to only filtering the entire dataset by individual column data; not useful when used on a column with many unique entries, such as a “Names” column

You can download the Filter sample as part of our FlexGrid Explorer demo.

Filter Row – Searches Individual Column for Keyword

Filter rows can be used to implement simultaneous filtering across multiple columns based on the typed criteria you choose. This requires an additional row at the top of the dataset that is used for filtering the entries beneath it. With this type of filter, it is possible to filter out data entries by setting filter criteria on two or more separate columns simultaneously. For example, you could easily filter out a specific dataset by filtering two separate columns by two separate prefixes.

• Pros: Can apply the filter on each column by using a text box above; can be used in conjunction with the FilterEditor to apply more complex filters; has the C1FlexGridFilterRow class associated with it that contains public fields, methods, and properties built in for ease of use

• Cons: Can be limited in complex filtering capabilities unless used in conjunction with other filter classes

You can download the Filter Row sample as part of our FlexGrid Explorer demo.

Full-Text Filter – Searches Every Column for Keyword

Full-text filters allow users to easily find specific data entries by entering the text of the entry they are searching for. The entire dataset will then be searched for the term entered within the text box associated with the filter. Through the use of the C1FullTextFilter class properties, the Full-Text filter can be made more strict as needed.

• Pros: Filters the grid’s data source based on user input to return search results using the C1FullTextFilter class; useful for exact searches and has properties, such as “Match Case,” that can make the filter more strict; allows the use of regular expressions and other filter manipulations, such as wildcard characters, to create very specific custom search filters based on user needs.

• Cons: Unable to apply two different filters in an OR operator relationship without more extensive code being written during implementation; filter is applied to the data source of the FlexGrid by default

You can download the Full-Text Filter sample as part of our FlexGrid Explorer demo.

DataFilter – Select Filters Through Accompanying Side Menu

Data filters are a useful way to quickly sort through data grids by creating preset filters that can be applied through an accompanying side panel to the grid. Inside the side panel, simply select the filter properties you would like to apply to the grid. Multiple filters can be applied at once, and you can easily deselect them by clicking on them again or removing the values. This type of filter is ideal for very large data sets that need to be filtered out by the end user at runtime, where an accompanying filter UI will simplify that process.

• Pros: Acts as a separate control tied to the FlexGrid by appearing on the side and allowing users to click on the filters they would like applied to the data; intuitive way for end users to filter through large datasets

• Cons: Doesn’t allow for custom, specific entry filtering, like a keyword search, unless used in conjunction with another filter type; requires time and effort to set up UI and logic for the filter

You can download the DataFilter samples as part of DataFilter Explorer demo.

FilterEditor – AND/OR Logic Filters

The FilterEditor class enables users to apply their own conditional operator logic using AND/OR statements to create their own filters to apply to their datasets. This is similar to Microsoft’s CRM filter expressions, where users can set a filter based on conditional expressions. This type of filter is good when trying to filter a dataset across two or more sets of different criteria requirements, as each set of filter criteria can be linked through conditional operators by the end user. The FilterEditor control represents a filter in the form of a tree. Tree nodes can be logical conditions "AND" and "OR" or a filter for a data source property.

• Pros: Allows the user of conditional operator logic across sets of filters and can be used on unbound grids

• Cons: Harder to implement; must be used on a collection of objects for best results

You can download the FilterEditor samples as part of our DataFilter Explorer demo.

Custom Filtering – Add Custom Icons and Filter Designs

Custom filtering is exactly what the name implies: a way for users to specifically handle unique filtering options based on the cell properties they prefer. Custom filtering is achieved through the use of our C1DataFilter class. The obvious advantage of using custom filters is having the freedom to design a specific filter in a way that is easiest for the end user to understand and interact with. However, this type of filter will require more manual code behind the scenes in order to handle the filtering. Some examples of custom filtering include an interactive map that filters based on the selected location, or colored icons that filter based on the selected color. This type of filter is especially useful when filter design presentation matters.

• Pros: Very customizable; open to however the developer is looking to design their application and easy to achieve through the C1DataFilter class

• Cons: Requires more background code to set up the filter UI, such as colors, icons, maps, designs, etc.

You can download the Custom Filter samples as part of our DataFilter Explorer demo.

Conclusion

Whether you’re building a simple desktop utility or a full-featured business application, FlexGrid’s rich set of filtering tools gives you the flexibility to shape data exactly the way your users need. From basic column filters and keyword-driven filter rows to powerful full-text search, side panel data filters, and custom conditional logic, each filtering option enables you to tailor the user experience for different scenarios and datasets.

Also new in .NET 10, ComponentOne has released the ExpressionEditor UI control for WPF. This new UI library gives you more query-building features that can be incorporated into FlexGrid and DataFilter.

Ready to try it out? Download ComponentOne Today!