filters

sets 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.

All the default filters will be removed for this Query Builder once you set filters. To avoid this, use the add() and remove() methods 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