Available only in PRO Edition

Working with Filters

Filters in Query Builder are presented by objects that contain functions which implement filtering logic.

Setting Filters

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:

  • id - (string) the filter ID
  • name - (string) the filter name (will be rendered in the list of options for filtering)
  • fn - (function) the filtering function
  • type - (object) a type-editor pair:
    • type - (string) the type of data to which the filter will be applied to ("number","string","any")
    • editor - (string,object) the name of the input for entering values or the object with Webix view configuration

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

The list of filters

All available filter functions are located in the filters array. Check the full list of filters.

Getting 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

Using getFilterHelper() Method

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);

Related sample:  Basic usage

Back to top