Sample Custom Filter Control

One of the most powerful features of the HTMLTreegrid is the ability to plug-in custom, interactive and rich content within each cell of the Grid. And not just that, we enable API hooks for these highly functional components to interact with the grid seamlessly, almost as if they were a part of the grid to begin with. Just scroll down to the bottom of this post and look at the UI, it appears as if the filter picker is an intrinsic part of the grid, where in fact, it is a completely custom plugged in component with rich functionality encapsulated within its bounds.

One of the most powerful features of the HTMLTreegrid is the ability to plug-in custom, interactive and rich content within each cell of the Grid. And not just that, we enable API hooks for these highly functional components to interact with the grid seamlessly, almost as if they were a part of the grid to begin with. Just scroll down to the bottom of this post and look at the UI, it appears as if the filter picker is an intrinsic part of the grid, where in fact, it is a completely custom plugged in component with rich functionality encapsulated within its bounds.

In this example, the DynamicFilterControl and DynamicFilterPopup are a custom filter component. If you look at the code for DynamicFilterControl you can see how this gets plugged in. Although this example demonstrates a fairly complicated piece of functionality, the concepts are quite simple - That is the use of renderers to implement custom filter functionality. Most of the code is actually related to implementation of the filter itself. This example implements the ICustomMatchFilterControl interface. This is applicable in scenarios where you filter control needs to perform additional logic beyond what is covered by the built in filter operators. You have to implement the isMatch function to decide whether an object in the dataprovider matches the filter controls filter criteria.

On running index.html you will see the following screen with "All" option at the top on column.

On clicking it will show a popup for selecting criteria, select any criteria and click ok to apply on grid. "Remove filter" will remove the criteria.

For the files associated with this help topic, please refer to http://blog.htmltreegrid.com/post/Setting-up-dynamic-filter-control-for-html-grid.aspx