[REACT] update dropdown data in event edit feature

[Jammb]

How To update dropdown data in event edit feature dynamically depending on which schedule we are viewing (Schedule A/Schedule B)

[fabio.mazza]

Hi Jammb,

Here you can see how to configure your event editor: https://www.bryntum.com/docs/scheduler/#Scheduler/feature/EventEdit

You can configure the resources dropdown changing the https://www.bryntum.com/docs/scheduler/#Scheduler/feature/EventEdit#config-resourceFieldConfig, adding store with specific filter depending of your condition and rules, updating the filter on open event editor according your rules depending of the condition.

[Jammb]

Hi Fabio,
In the below file, the FOH values changes whenever I trigger a method. Based on that the job codes are changing but those values are not reflecting on the event edit DropDown. And also in multiselect is there a way to restrict the selection to max selection of only three ? There is no example of dynamic change of drop down values in extra items of event edit dropdown

[fabio.mazza]

Hi Jammb,

Please, post your code using "Code display" button on editor forum instead of screenshot it, will be good for us to copy when needed. Screenshots are good to show the browse result on your UI.

There is no option to define max selection for combo multiselect. You can implements overriding it or using some select events directly on your app.

To load data on your combo, you can do like bellow, this works on the fly, means it can change dynamically on your app.

...
features: {
    eventEdit: {
        items: {
            jobCode : {
                type: 'combo',
                label: 'Job Code',
                name: 'jobCode',
                multiSelect: true,
                items: ['Job 1', 'Job 2', 'Job 3'],
            }
        }
    }
},
...

scheduler.features.eventEdit.jobCode.items = ['Job 4', 'Job 5', 'Job 6'];

Probably for your react code, will be like:

...
features: {
    eventEdit: {
        items: {
            jobCode : {
                type: 'combo',
                label: 'Job Code',
                name: 'jobCode',
                multiSelect: true,
                items: foh
            }
        }
    }
},
...

PS: This code is about latest version, you have to adapt to correct version you are using.

[fabio.mazza]

Here is a feature request issue created about maxSelection for combo: https://github.com/bryntum/support/issues/1508

Thank's for your suggestion.

[Jammb]

  const getJobCodes = (foh : boolean)=> {
    return foh ? ["JOB1","JOB2"] : ["JOB3","JOB4"]
  };
  

   eventEdit : {
           // editorConfig : {  bbar: { items : { deleteButton : {   hidden : true }  } } },
            showNameField : false,
            triggerEvent: 'eventclick' ,
            showResourceField:false,
            extraItems : [
            {
              type  : 'combo',
              name  : 'jobCode',
              ref   : eventsVersion,
              label : 'Job Code',
              index : 1,
         //     listItemTpl: item => item.text,
                  items       :getJobCodes(foh),
              multiSelect :true,
          },
          

    ]
  },
  

In the above code I use external Button to change the job codes. The getJobcode(foh) is receiving the code differently based on foh. But The same is not reproduced in the screen.

[alex.l]

Hi jammb,

You need to update the list every time before show EditEvent dialog. So, a good place to do it might be https://bryntum.com/docs/scheduler/#Scheduler/feature/EventEdit#event-beforeEventEditShow

    onBeforeEventEditShow({ editor }) {
        const combo = editor.widgetMap. jobCode;
        combo.items = isTrue ? [...] : [...];
    }

[Jammb]

I have attached the implementation of updating drop down data. In the file I am trying to update getJobCodes to reflect on event dropdown.

[alex.l]

Hi jammb,

According to your code, you are trying to change values in initialConfig which is wrong. Please, check my code example, you need to change data in the combo component. Please use widgetMap instead:

const combo = val.editor.widgetMap.jobCode;
combo.items = ["100", "Server"];

All best,
Alex