registerFilter

adds an external filter for a particular column or data field

function registerFilter(
    // an HTML input or a Webix control object
    object: HTMLElement|object,
    // the object with settings (must include a unique columnId)
    config: object,
    // the controller object
    controller: object
): void

Example

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

also check the next samples:

Filtering by Multiple Criteria

Details

In the above sample:

the input with ID=‘myfilter’ becomes a filter for a datagrid column with ID=‘title’;
the getValue method of the newly created filter gets the value from its HTML node and sets it as filtering parameter.

Requirements

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 mygrid = grid;
mygrid.registerFilter(
  someControl,
  { columnId:"any" },
  {
    // getValue, setValue...
  }
);
mygrid.registerFilter(
  someOtherControl,
  { columnId:"dates" },
  {
    // getValue, setValue...
  }
);

you can check the full snippet DataGrid: 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.

Controller

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:

getValue() - obligatory, retrieves value from the filter
setValue() - optional, sets value to the filter
$server (boolean) - set this field to true to register a server filter. In this case local data will be ignored and the filter value will be send to the server. Note that you also need to specify data source via the dataFeed property of the view you filter data in.

Below is a basic example of the controller usage:

grid.registerFilter(
  someControl,
  { columnId:"title" },
  // defining the controller object
  {
    getValue:function(view){
      return view.getValue();
    },
    setValue:function(view, value){
      view.setValue(value)
    }
  }
);

you can check the full snippet DataGrid: Register Input as Filter

registerFilter

Example

Details

Requirements

Controller

See also