adds an external filter for a particular column or data field
| object |
// registering HTML input as a filter
grid.registerFilter(
document.getElementById("myfilter"),
{ columnId:"title" },
{
getValue:function(object){
return object.value;
},
setValue:function(object, value){
object.value = value;
}
}
);
// registering List as a filter
grid.registerFilter(
$$("myfilter"), // is stored as 'list' parameter in 'getValue'
{ columnId:"year" }, // a column to filter
{
getValue:function(list){
var selection = list.getSelectedId();
var item = list.getItem(selection)
var filterValue = item.filter;
return function(year){
return year > filterValue
}
}
}
);
In the above sample:
Each column/data field can have only one filter (either external or within the header) to avoid any inconsistency. It means that each specified columnId in registerFilter calls must be unique. columnId can be any custom key.
const table = $$("table");
table.registerFilter(
someControl,
{ columnId:"any" },
{
// getValue, setValue...
}
);
table.registerFilter(
someOtherControl,
{ columnId:"dates" },
{
// getValue, setValue...
}
);
Related sample: Datatable: Adding new filters
The primary filter config may also contain the following properties: - compare - defines a custom comparing function, optional. - prepare - defines a custom function for data pre-processing, optional.
When you register an input/view as a filter, you can pass the controller object as the last parameter of the registerFilter() method. The object stores a set of controlling methods and flags that you can redefine:
Below is a basic example of the controller usage:
$$("grid").registerFilter(
$$("textField"),
{ columnId:"title" },
// defining the controller object
{
getValue:function(view){
return view.getValue();
},
setValue:function(view, value){
view.setValue(value)
}
}
);
Related sample: Datatable: Register Input as Filter