Introduction to FilterEditor in DataFilters for WinForms

With the latest ComponentOne 2020v1 release, we are excited to announce the addition of a new UI-based filter control, the C1FilterEditor. The FilterEditor is designed with an intuitive UI allowing end-users to create complex filter criteria dynamically.

The C1FilterEditor

C1FilterEditor is a control with a tree-view layout that allows the end-users to create advanced filter criteria by adding filter combinations and operations as nodes. A filter combination is a collection of filter operations, which is an expression that enables the end-user to select the field, value, and the type of logical operation by which the data should be filtered.

This control has been added to the ‘C1.Win.DataFilter’ assembly, which includes the existing C1DataFilter control.

Now we know what C1FilterEditor is and how it looks. Let’s go a little further and learn more about the control.

C1FilterEditor Key Features:

UI-Based Filtering

FilterEditor filters the data source by adding combinations of filter operations organizing them into a tree-like structure. The UI of the control empowers the developer to create complex filter criteria with a few clicks.

End-User Interaction

The control supports interactive features to provide a convenient filtering interface to the end-users. The following lists down the operations an end-user can perform with C1FilterEditor:

Expanding/Collapsing the filter:

FilterEditor groups the filter conditions logically (into And/Or functions) hence, creates a tree-like structure. This layout enables toggling the filter conditions display and allows focusing more on the specific filter operation. C1FilterEditor enables this feature by providing +/- boxes with each node.

Addition/Deletion of Filter:

Using FilterEditor, end-users can dynamically add or delete filter combination/operations and see the corresponding result simultaneously in the data control. FilterEditor enables this by providing +/X buttons with each filter combination/operation.

Dragging/Dropping the Filter:

FilterEditor supports changing the order of filter combination and/or moving the filter operation from one combination to another by simply dragging and dropping them. C1FilterEditor enables this with the help of a vertical ellipsis button.

The control gives the flexibility to allow or prevent drag/drop by setting the EnableDragDrop property to true/false respectively.

Programmatic Filtering

In addition to the dynamic UI-based filtering, the control also supports creating the same filter criteria through code. Through this, the developer of the application can build a default view by applying a predefined filter. Filtering through code can be done by using the CombinationExpression and OperationExpression classes.

Seamless Integration

FilterEditor control integrates seamlessly with any UI component, enabling convenient filtering with UI components that do not have any in-built filtering support.

So far, we’ve discussed the benefits of using C1FilterEditor and what it offers. But before we dive into how to take the advantages of these features, let's first glance through some of the common terms related to C1FilterEditor.

Terminologies in FilterEditor

To build filter criteria using C1FilterEditor, here are the following common terms related to C1FilterEditor:

Filter Operation

A filter operation can be defined as the filter condition through which you expect the data to be filtered. Each filter operation defines the column/field, the logical operator, and the value.

Like for example, ‘SupplierID = 4’ is a filter operation where “SupplierID” is the name of a column/field/property present in the data source, ‘Equal’ is the ‘=’ operator and 4 is the value.

Filter Combination

A filter combination is a set of simple filter conditions/operations or other groups combined by the same logical operator. In Mathematical terms, it can be considered as the sections in a filter expression wrapped by brackets.

For instance, the ‘SupplierID = 4 AND Discontinued = False OR CategoryID = 2' filter expression can be wrapped with round brackets as ‘(SupplierID = 4 AND Discontinued = False) OR (CategoryID = 2)’. This expression now shows two groups: Group1: SupplierID = 4 AND Discontinued = False and Group2: CategoryID = 2, where filter conditions in each group are combined by the same logical operator.

Now, as we’re aware of the terminologies related to C1FilterEditor, let’s talk about how to create filter criteria using C1FilterEditor.

Filter Expressions

The C1FilterEditor control allows creating filter criteria of any complexity by adding a series of filter combinations and operations. The following sections demonstrate its stepwise implementation:

Building Simple Filter Criteria

Even the simplest filter expression contains three elements: Field, operator and value, collectively known as filter operation.

To see the implementation, let’s look at the filter criterion we discussed in the Filter Operation heading above: ‘SupplierID = 4’.

Run-time steps:

1. Drag-drop the C1FilterEditor control from the VS toolbox onto your WinForms project's form.

2. Look for the 'DataSource' property in the properties window and set it to the data source.

3. The default layout of the control will have a default root operator 'AND'.

4. Click the plus icon on the right side. It will create a filter operation template.

5. C1FilterEditor automatically populates the first drop-down with all the fields/properties from the data source. Here, select ‘SupplierID’ from the drop-down.

6. The second drop-down contains the logical operators based on the type of the selected field/property. Here, select the ‘Equal’ operator.

7. Now, in the third element enter the value: 4.

8. Click the ApplyFilter button at the bottom.

Equivalent C# Code:

The above filter expression can also be implemented using the below code:

private static CombinationExpression GetPredefinedFilter()
{
  var filterExpression = new CombinationExpression();
  var filterExpressions = filterExpression.Expressions;
  var supplierIDEqual4Expression = new OperationExpression()
   {
      PropertyName = "SupplierID",
      FilterOperation = FilterOperation.Equal,
      Value = 4
   };
   filterExpressions.Add(supplierIDEqual4Expression);       
   return filterExpression;
}

Completing the above steps by UI/code will filter the data source in a way that only the records which satisfy ‘SupplierID = 4’ condition will remain in the data source/view.

Building Complex Filter Criteria

C1FilterEditor allows creating advanced filter criteria containing multiple filter operations. That is, using C1FilterEditor you can create filter expressions that consist of multiple groups of filter conditions combined logically (through AND/OR operators).
To showcase, let's consider a complex filter criterion: 'SupplierID = 4 AND Discontinued = False OR CategoryID = 2 OR CategoryID = 6'. To implement such a filter expression, we need to first identify the groups. So, let's wrap this expression by brackets and combine them through the logical operator as '(SupplierID = 4 AND Discontinued = False) OR (CategoryID = 2 OR CategoryID = 6)'.

So, the two groups are Group 1: (SupplierID = 4 AND Discontinued = False) and Group 2: (CategoryID = 2 OR CategoryID = 6).

Run-time steps:

1. Drag-drop the C1FilterEditor control from the VS toolbox onto your WinForms project's form.

2. Look for the 'DataSource' property in the properties window and set it to the data source.

3. The default layout of the control will have a default root operator 'AND'. Toggle it to OR operator, since we want the groups to be combined through OR logical operator.

4. Click the + icon and select 'Combination', this will create a row for group 1.

5. On the new row, click the + icon and select 'Operation' to create a row for filter condition.

6. Now, change the field element to 'SupplierID', filter operator to 'Equal', and enter '4' in the last element.

7. Similarly, add another 'Operation' row and set its element to Discontinued, Equal, and False respectively. This completes the first group.

8. With the first group completed, we need to add a row for group 2.

9. For group 2, again click the + icon in root row, select 'Combination', and set OR as the operator.

10. Like step 5, click the + icon on the new row and select 'Operation' to create a row for filter condition.

11. Set the element values to 'CategoryID', 'Equal' and '2'.

12. Again, add a new row for the second filter condition and set its values to 'CategoryID', 'Equal', and '6'.

13. Click the Apply Filter button to filter the data source.

Equivalent C# Code:

The above filter expression can also be implemented using the below code:

//Using AND combination
private static CombinationExpression GetPredefinedFilter()
{
  var filterExpression = new CombinationExpression();
  var filterExpressions = filterExpression.Expressions;

  //Adding first operation to AND combination
  var supplierIDEqual4Expression = new OperationExpression()
  {
      PropertyName = "SupplierID",
      FilterOperation = FilterOperation.Equal,
      Value = 4
  };
  filterExpressions.Add(supplierIDEqual4Expression);        

  //Adding second operation to AND combination
  var discontinuedEqualFalseExpression = new OperationExpression()
  {
     PropertyName = "Discontinued",
     FilterOperation = FilterOperation.Equal, 
     Value = False
  };
  filterExpressions.Add(discontinuedEqualFalseExpression);

  //Adding new OR combination
  var categoryIDOrExpression = new CombinationExpression();
  categoryIDOrExpression.FilterCombination = FilterCombination.Or;
  var categoryIDExpressions = categoryIDOrExpression.Expressions;

  //Adding first operation to OR combination
  var categoryIDEqual2Expression = new OperationExpression()
  {
      PropertyName = "CategoryID",
      FilterOperation = FilterOperation.Equal,
      Value = "2"
  };

  categoryIDExpressions.Add(categoryIDEqual2Expression);

  //Adding second operation to OR combination
  var categoryIDEqual6Expression = new OperationExpression()
  {
      PropertyName = "CategoryID",
      FilterOperation = FilterOperation.Equal,
      Value = "6"
  };

   categoryIDExpressions.Add(categoryIDEqual6Expression);
   filterExpressions.Add(categoryIDOrExpression);
   return filterExpression;
}

We're done. The above code will filter the data with the complex filter criterion: 'SupplierID = 4 AND Discontinued = False OR CategoryID = 2 OR CategoryID = 6'

We hope you like the new control and find it easy to use and integrate into your application. If you have any ideas or use-case scenarios, feel free to comment below.