Customize your JavaScript data grid to filter information the way you need it to with Wijmo FlexGrid's FlexGridFilter extension, which allows you to add a filtering UI to any FlexGrid control. Set different filter types for each column, localize your filter editor, and more using the properties and methods in the FlexGridFilter class. Let's take a look at some of the ways you can customize your filter's behavior for your project.
Adding the Extension
To add FlexGridFilter to your data grid, include the extension file — wijmo.grid.filter.js — in your page and use the following code to enable filtering:
// add column filters to the flexGrid control
var filter = new wijmo.grid.filter.FlexGridFilter(flexGrid);
If you're coding with AngularJS, you can use the wj-flex-grid-filter directive to add the extension:
<!-- create a FlexGrid with column filters -->
<wj-flex-grid ... >
<wj-flex-grid-filter></wj-flex-grid-filter>
</wj-flex-grid>
Adding/Removing Filter Icons & Sort Buttons
Control if and how users access filtering and sorting using the showFilterIcons and showSortButtons properties in the FlexGridFilter class. You can remove filter icons — which the filtering UI automatically adds to the column headers — by setting the showFilterIcons property to false.
Just like with the showFilterIcons property, you can set the showSortButtons property to false to remove sorting buttons from the filter editor. However, users can still sort columns by clicking on column headers after you remove the sorting buttons: the showSortButtons property affects whether sorting buttons appear within the editor, not whether users can sort columns.
Setting Filter Types
FlexGridFilter has four filter settings: None, Condition, Value, and Both. Using Condition, users can set conditions that the column's values have to meet. Using Value, users can select specific values in the data grid to filter by. None, of course, disables filtering, while Both enables users to filter by condition and value or to choose which one they want to filter by. Enabling users to filter by either condition or value provides them with a wide range of filtering possibilities, so users can easily view whatever type of data they need.
Set the default filter for all columns using the defaultFilterType property. If you want a specific column to filter by a different type than the default, you can override the set value for the defaultFilterType property and set different filter types for certain columns. For example, you can change the filter type for the "Downloads" column to a different type than the default in the FlexGridFilter demo.
FlexGridFilter also includes smart filters that provide filtering options based on the type of data in your column, so you don't need to worry about specifying the type of value that's being filtered. For instance, filtering by condition in the "Downloads" column on the FlexGridFilter demo gives users options to show items based on numerical values: is greater than, is greater than or equal to, is less than, etc. On the other hand, filtering by condition in the "Country" column gives users options to show items based on text values: begins with, ends with, contains, etc.
Localizing Your Filter Editor
You can make your data grid's filter accessible to users who don't speak English. Localize your filter editors as well as the date and time columns in your grid. Choose from more than 40 culture options, including Bulgarian, Hindi, Kazakh, and Turkish.
Download your free 30-day trial of Wijmo to explore all of Wijmo's controls, features, and extensions.
MESCIUS inc.