registerFilter

adds an external filter for a particular column or data field

void registerFilter(HTMLElement|object object,object config,object controller);

object	HTMLElement\|object	an HTML input or a Webix control object
config	object	the object with settings (must include a unique columnId)
controller	object	the controller object

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;
        }
    }
);
 
// registering List as a filter 
grid.registerFilter(
  $$("myfilter"),   // is stored as 'list' parameter in 'getValue'
  { columnId:"year" },  // a column to filter
  {
    getValue:function(list){
      var selection = list.getSelectedId();
      var item = list.getItem(selection)
      var filterValue = item.filter;
      return function(year){
        return year > filterValue 
      }
    }
  }
);

Related samples

Filtering by Multiple Criteria

Details

In the above sample:

the input with ID='myfilter' becomes a filter for a datatable 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 table = $$("table");
table.registerFilter(
  someControl,
  { columnId:"any" },
  {
    // getValue, setValue...
  }
);
table.registerFilter(
  someOtherControl,
  { columnId:"dates" },
  {
    // getValue, setValue...
  }
);

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(
  $$("textField"),  
  { columnId:"title" },
  // defining the controller object
  {  
    getValue:function(view){
      return view.getValue();
    },
    setValue:function(view, value){
      view.setValue(value)
    }
  }
);