Available only in PRO Edition
Filters in Query Builder are presented by objects that contain functions which implement filtering logic.
To specify filters, you need to make use of the filters property.
webix.ui({
view:"querybuilder",
...
filters:[
{
id: "equal",
name: "equal",
fn:(a, b) { return a === b; },
type: { "any" : "text" }
},
{
id: "contains",
name: "contains",
fn:(a, b) { return a.indexOf(b) !== -1; },
type: { "string" : "text" }
}
];
Each filter object should have the following properties:
If you define filters as an array or DataCollection, all the default filters will be removed for this Query Builder. So to add custom filters and to be able to use the default ones, use the add() method of the filters collection:
$$("querybuilder").config.filters.add({
id:"radio",
name:"One From",
type:{ "rating" : ratingEditor },
fn:(a,b) => a == b
});
Related sample: Custom elements
All available filter functions are located in the filters array. Check the full list of filters.
You can get the list of all applied filters:
var filters = $$("querybuilder").config.filters;
const all_filters = filterCollection.data.pull;
/*
{
"1":{
fn:function(a, b)
id:"less_or_equal"
name:"less or equal"
type:{ "number":"counter" }
},
"2":{
fn:function(a)
id:"is_null"
name:"is null"
type:{ "any":"text" }
}
]
*/
You can add/update/remove filters with the help of add, updateItem and remove methods:
var filters = $$("querybuilder").config.filters;
filters.remove("equal");
filters.add({
id: "equal",
name: "equal",
fn:(a, b) => a === b,
type: { "any" : "text" }
});
Related sample: Query Builder: changing filters
In order to use Query Builder for filtering a dataset, you need to get the helper function that implements the filtering logic. You can do this with the help of the getFilterHelper method.
var filter_helper = $$("querybuilder1").getFilterHelper();
The returned "helper" function iterates through the dataset items and checks whether they correspond to the filter rules. The "helper" function returns true if the item complies with the rule and false, if it doesn't.
After you've received the helper function, you can pass it to the Webix filter method to enable filtering of data components with Query Builder.
For example, with Webix DataTable:
$$("$datatable1").filter(helper);
Back to top