registerFilter

adds an external filter for a particular column or data field

void registerFilter(HTMLElement|object object,object config,object controller);
objectHTMLElement|objectan HTML input or a Webix control object
configobjectthe object with settings (must include a unique columnId)
controllerobjectthe 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

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

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

Related sample:  Datatable: Register Input as Filter

See also
Back to top
If you have not checked yet, be sure to visit site of our main product Webix mvc library and page of javascript datagrid library product.