registerFilter

adds an external filter for a particular column or data field

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

Parameters

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:  

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.