Configuration Options - Filters

In the previous section, we saw how to get a grid with quite a bit of the functionality enabled. We saw how to enable the toolbar, which by default contains buttons for settings, filters, print and export. All of these come with their default functionality, and can be extended to meet your needs. In this section, we will explore a key feature of the HTMLTreeGrid, filters.

Filters by default are drawn below the headers. You can customize this, by using the displayOrder property. In this section, we will add some filters to the grid we built. All you have to do is to specify a filterControl and filterOperation. First, let’s look at the markup required to enable simple text based filters for the grid:

All you have to do, is to add the text in red to the markup from above:

configuration

'                                <columns>' +

'                                        <column dataField="id" headerText="ID" filterControl="TextInput" filterOperation="Contains"/>' +

'                                        <column dataField="type" headerText="Type" filterControl="TextInput" filterOperation="Contains"/>' +

'                                </columns>' +

Once you do this, you should see the following UI:

Just by specifying a couple of configuration options, you could enable a number of filter operations.

Here are the built in filter controls, from the documentation of the setFilterControl method:

The filter control to associate with this column. There are a number of built in filter controls, and you can even write your own by implementing the IFilterControl interface. To be implemented by any control that can participate in the filtering mechanism. There are the following controls available out of the box:

• TextInput
• TriStateCheckBox
• ComboBox
• MultiSelectComboBox
• DateComboBox
• DateRangeBox
• NumericRangeBox
• NumericTextInput

You can write your own custom text input controls by extending any of these, or by implementing the IFilterControl, ICustomMatchFilterControl, or IDynamicFilterControl. For an example of this, please look at http://blog.flexicious.com/post/ICustomMatchFilterControl-example.aspx

The filterOperation also, can be one of a number of different options. These options are defined in the FilterExpression class, and are mentioned below for quick reference:

               public static var FILTER_OPERATION_TYPE_NONE:String = "None";

               public static var FILTER_OPERATION_TYPE_EQUALS:String = "Equals";

               public static var FILTER_OPERATION_TYPE_NOT_EQUALS:String = "NotEquals";

               public static var FILTER_OPERATION_TYPE_BEGINS_WITH:String = "BeginsWith";

               public static var FILTER_OPERATION_TYPE_ENDS_WITH:String = "EndsWith";

               public static var FILTER_OPERATION_TYPE_CONTAINS:String="Contains";

               public static var FILTER_OPERATION_TYPE_DOES_NOT_CONTAIN:String = "DoesNotContain";

               public static var FILTER_OPERATION_TYPE_GREATER_THAN:String = "GreaterThan";

               public static var FILTER_OPERATION_TYPE_LESS_THAN:String = "LessThan";

               public static var FILTER_OPERATION_TYPE_GREATERTHANEQUALS:String = "GreaterThanEquals";

               public static var FILTER_OPERATION_TYPE_LESS_THAN_EQUALS:String = "LessThanEquals";

               public static var FILTER_OPERATION_TYPE_IN_LIST:String = "InList";

               public static var FILTER_OPERATION_TYPE_NOT_IN_LIST:String = "NotInList";

               public static var FILTER_OPERATION_TYPE_BETWEEN:String = "Between";

               public static var FILTER_OPERATION_TYPE_IS_NOT_NULL:String = "IsNotNull";

               public static var FILTER_OPERATION_TYPE_IS_NULL:String = "IsNull";

This is documented at:

http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGridColumn.html#property_filterOperation

One of the things to keep in mind here, are that the filter mechanism itself is quite a powerful beast. Not only can you specify a number of parameters associated with the built in filters, but you can also create your own filters, with your own logic.

There are many more options with filters, as you can see in our demo console. This is a getting started guide, so we are only going to cover the basics here. You can refer to configuration files from the demo console as well as our API docs for additional options with filters.