Our pure JavaScript Scheduler component


Post by rajat_5107 »

const filterUsersDropdown = {
  type: 'combo',
  multiSelect: true,
  items: [],
};
columns = [
  {
    text: 'Name',
    type: 'template',
    field: 'name',
    editor: false,
    align: 'left',
    width: 250,
    enableCellContextMenu: true,
    template: ({ record }) => {
    },//code for template
    tooltipRenderer: ({ record }) => {
    },// code for tooltip
    cellMenuItems: [],//code for cell menu items
    filterable: {
filterField:filterUsersDropdown
      filterFn: ({ record, value }) => {
        return !value.length || value.includes(record.id);
      },
    },
  },
]

in react component when user is fetched from api we directly inject the options in componentdidmount

const reqColumn = schedulerEngine.columns.get('name').filterable;
    reqColumn.filterField.items = Mapper.getDropdownData(resources);// api response to object {value:'',text:''}
    

but the options is not reflected in dropdown of filterbar.


Post by mats »

Please see the docs, it shows how to add a combo to the filter bar feature. https://bryntum.com/docs/scheduler/#Grid/feature/FilterBar

{
       field : 'city',
       text : 'Visited',
       flex : 1,
       // Filterable with multiselect combo to pick several items to filter
       filterable : {
         filterField : {
           type        : 'combo',
           multiSelect : true,
           items       : ['Barcelona', 'Moscow', 'Stockholm']
         },
         filterFn    : ({ record, value }) => !value.length || value.includes(record.city)
       }
     }

Post by rajat_5107 »

Yeah,

but can the items in the filter be set dynamically, say the data from api


Post by mats »

Why not, just define the combo with a store having data loaded remotely?


Post Reply