Custom Filter

updated doc to 1.x version

index

• Filter Complex Object

Description

You can also create your own Custom Filter with any html/css you want and/or jQuery library you wish to use. Angular template (component) are not supported at this point, if you wish to contribute on that end then I certainly accept PR (Pull Request).

Limitations

• as mentioned in the description, only html/css and/or jQuery libraries are supported.
  • this mainly mean that Angular templates (components) are not supported (feel free to contribute).
• SlickGrid uses table-cell as CSS for it to display a consistent height for each rows (this keeps the same row height/line-height to always be the same).
  • all this to say that you might be in a situation were your filter shows in the back of the grid. The best approach to overcome this is to use a modal if you can or if the library support append to body container. For example, you can see that multiple-select.js support a container and is needed for the filter to work as can be seen in the multipleSelectFilter.ts

Demo

Demo Page / Demo Client Component / Custom InputFilter.ts

How to use Custom Filter?

1. You first need to create a class using the Filter interface. Make sure to create all necessary public properties and functions.

• You can see a demo with a custom-inputFilter.ts that is used in the demo - example 4

2. Simply set the columnDefinition.filter.model to your new custom Filter class and instantiate it with new (you can also use dependency injection in the constructor if you wish). Here is an example with a custom input filter:

// define you columns, in this demo Effort Driven will use a Select Filter
this.columnDefinitions = [      
  { id: 'title', name: 'Title', field: 'title' },
  { id: 'description', name: 'Description', field: 'description', type: FieldType.string,
    filterable: true, 
    filter: {
       model: new CustomInputFilter() // create a new instance to make each Filter independent from each other
    }
  }
];

// you also need to enable the filters in the Grid Options
this.gridOptions = {
   enableFiltering: true
};