Resources combobox in the tBar to show the calendars (resources) of the multiple users

[peter@tjecco.com]

I am using a multiselect combobox inside the tbar instead of the resourcesFilter that is normally placed in the sidebar. I am trying to perform the same functionality, what the checkboxes inside the resourcesFlter also do. How to I do that? What is the right function that shows the right resource according to the selection made in the combobox?

My example code:

 
 {
    tbar: {
          items: {
            resourceFilter: {
              weight: 100,
              multiSelect: true,
              style: "width: 20rem; margin-left: 2em",
              placeholder: "Executors",
              type: "resourceCombo",
              displayField: "name",
              valueField: "id",
              value: [1],
              store: me.getResources(),
              keyStrokeChangeDelay: 200,
              onChange: "up.onResourceFilterChange"
            },
          }
      },
      

  onResourceFilterChange(event) {
    calendar.selectedResources = [event.value]; //this does not work
    calendar.refresh();
},
  }
  

[tasnim]

Hi,

You could use https://bryntum.com/products/calendar/docs/api/Scheduler/data/EventStore#function-filter or https://bryntum.com/products/calendar/docs/api/Scheduler/data/EventStore#function-addFilter to filter out the records according to the selected item

To remove filters you could use https://bryntum.com/products/calendar/docs/api/Scheduler/data/EventStore#function-removeFilter or https://bryntum.com/products/calendar/docs/api/Scheduler/data/EventStore#function-clearFilters

Best regards,
Tasnim

[peter@tjecco.com]

Hi Tasnim,

Thanks for your reply!
Question, here I only filter the eventStore records, but how do I add the correct resource calendar view to canvas when the item is selected from the combobox?

[tasnim]

Hi,

Here is an example of how you could achieve it.

I used onAction instead of onChange

calendar.tbar.add({
    weight: 100,
    multiSelect: true,
    style: "width: 20rem; margin-left: 2em",
    placeholder: "Executors",
    type: "resourceCombo",
    displayField: "name",
    valueField: "id",
    value: ['bryntum'],
    store : calendar.resourceStore,
    keyStrokeChangeDelay: 200,
    onAction(props) {
        const { source, value } = props;
        const cal = source.up('calendar');
        cal.eventStore.clearFilters();
        cal.eventStore.filters = [{
            id : 'my-filter',
            filterBy(record) {
                let result;
                for (let i = 0; i < value.length; i++) {
                    result = record.resources.find(resource => resource.id === value[i]);
                    if (Boolean(result)) {
                        break;
                    }
                }
                return result;
            }
        }];
    }
});

[Animal]

If you're not going to remove the sidebar version of that filter, you should at least keep it synced.

Or just set its selection so that it does the filtering job for you.

[Animal]

This example uses its own added multiSelect Combo to do filtering: https://bryntum.com/products/calendar/examples/customized-resourcefilter/

Obviously, your UI doesn't want inlinePicker : true, but chuck that in the tbar and it should Just Work

[peter@tjecco.com]

Hi Animal,

from your example I need to build only the resourceView but instead of the checkboxes I need to use the combobox and place it in the tbar.

I don't only need to filter the events, but also add a new resourceView once the selection is made. I still can't figure out how it works, because there is only code for filtering the eventStore..

[Animal]

Try this example: https://codepen.io/Animal-Nige/pen/vYbMxxK?editors=0110

Needs that strange CSS because there's some bug with DomSync where the avatars get doubled. No idea why, but it only happens once, so hiding the second resource avatar works round it.

.b-resourceview .b-resource-avatar.b-resource-initials:nth-child(2) {
    display : none;
}

[peter@tjecco.com]

Hi,

Thanks a lot! It works!