Our pure JavaScript Scheduler component


Post by peterjc »

Hi, I am using the Scheduler in my Ionic?Angular projects, and I have just a single column I define as follows..

public columns = [
    {
      type: 'resourceInfo',
      field: 'name',
      showImage: false,
      editor: false,
      showEventCount: false,
      searchable: false,
      sortable: false,      
renderer({ cellElement, record }) {
const colour = record.data.colour; if (colour) { ... } return record.name; }, headerRenderer(data) { return "<div style='padding:0;margin:0'></div>"; } } ];

And this gives me the filter box above my column..

filter.png
filter.png (9.98 KiB) Viewed 692 times

This filters my resources using a "contains", but I was wondering is there a way to defined a custom filter function, if I were to want to perhaps let a user put in a more complex filter term, and then I could use the function to parse it, where function would need to have access to the filter text entered, and then be able to compare this to each resource and return a pass or fail?

Thanks in advance for any help.


Post by pmiklashevich »

That's supported! Please see https://www.bryntum.com/docs/scheduler/#Grid/feature/FilterBar docs.
filterable could be a function or a config with filterFn specified:
  columns: [
     {
       field      : 'age',
       text       : 'Age',
       type       : 'number',
       // Custom filtering function that checks "greater than"
       filterable : ({ record, value }) => record.age > value
     },
  columns: [
     {
       field : 'name',
       // Filterable may specify a filterFn and a config for the filtering input field
       filterable : {
         filterFn : ({ record, value }) => record.name.toLowerCase().indexof(value.toLowerCase()) !== -1,
         filterField : {
           emptyText : 'Filter name'
         }
       }
     },

Pavlo Miklashevych
Sr. Frontend Developer


Post by peterjc »

Hi pmiklashevich,

I did miss finding that in the doco, but there it is.

Thank you very much that does exactly what I was after!

Post Reply