filters

sets the custom filters for QueryBuilder

array|DataCollection filters;

Example

webix.ui({
    view:"querybuilder",
    id:"querybuilder",
    ...,
    filters:[
        {   
            id: "equal", 
            name: "equal", 
            fn:(a, b) => a === b, 
            type:{ "any" : "text" }
        }, 
        {
            id: "contains", 
            name: "contains", 
            fn:(a, b) => a.indexOf(b) !== -1, 
            type:{ "string" : "text" }
        }
    ]
});

Related samples

Details

Filters can be set as an array or DataCollection, but QueryBuilder stores them only as DataCollection.

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:

var filters = $$("querybuilder").config.filters;
filters.remove("equal");
filters.add({
    id: "equal", 
    name: "equal", 
    fn:(a, b) => a === b, 
    type: { "any" : "text" }
});

Filters are stored in objects like these:

{
    "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:{ "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

You can configure inputs for values by creating a view object with the view configuration and then set it as an editor:

const myEditor = {
    view:"richselect",
    options:[ "Mary", "Canary" ]
};
var filters = $$("querybuilder").config.filters;
filters.add({
    id:"equal", 
    name:"equal", 
    fn:(a, b) => a === b, 
    type:{ "string" : myEditor }    });

The full list of predefined filters is given in the related article.

See also
Back to top