[ANGULAR] ResourceFilter: selected parameter is ignored and all resources are selected

[tomas@between.as]

Hi Bryntum team,

I’m trying to preselect specific resources in the resourceFilter config of my calendar. However, when I set the selected property to an array of resource IDs, the filter still selects all resources.

My goal is to restore the user’s last used filter state using StateProvider. But even if I hardcode a single ID, it gets ignored.

Here’s my current config:

resourceFilter : {
    weight : 300,
    selected: [118], // This is ignored, all resources get selected
    selectAllItem: true,
    store: {
        groupers: [
            { field: 'group' },
        ]
    },
    listeners: {
        change: ({ value, source }: { value: any, source: any }) => {
            onValueChanges(value, source.initialConfig.ref);
        }
    }
}

The problem:
Even though the initialConfig.selected value is correctly set to ['USR-1'], when I inspect the actual selected values (resourceFilter.selected.values), all 29 resources are selected.

You can see a snapshot of the resourceFilter when i console.log it and result:
initialConfig.selected: ['USR-1']

selected.values:
Contains all 29 resources — including IDs like 'USR-1', 'USR-330', 118, 123, etc.

Here’s an example of one of the selected items in selected.values:

ModelClass {
  _id: 'USR-330',
  data: {
    id: 'USR-330',
    name: 'Bjarne Invito',
    role: 'Crew',
    group: 'Ansatte',
    ...
  },
  ...
}

My question:

Why is resourceFilter ignoring the selected array and selecting all resources instead?
Does this have to do with store loading order, or is there something else I should configure?

[tasnim]

That seems like a bug. We'll investigate it. Here is the ticket to track progress https://github.com/bryntum/support/issues/11359

Thank you for your report.

[tomas@between.as]

Okay, Is there any other ways i can do what i wanted? To work around this bug.

[tasnim]

Yes. There is one workaround: when the crudManager loads all the data, rewrite the selected field of resourceFilter

const calendar = new Calendar({
    // Start life looking at this date
    date : new Date(2020, 9, 12),

// 'day', 'week', 'month', etc.
mode : 'week',

// CrudManager arranges loading and syncing of data in JSON form from/to a web service
crudManager : {
    autoLoad : true,
    loadUrl  : 'data/data.json'

    // Changes can be automatically sent to your server after every change
    // autoSync : true,
    // syncUrl  : './yourEndPoint'
},

sidebar : {
    items : {
        datePicker : {
            // highlight the selected cell's week row
            highlightSelectedWeek : true
        },
        resourceFilter : {
            selected : ['bryntum'],
            selectAllItem : true,
        }
    }
},

appendTo : 'container',

// Features named by the properties are included.
// An object is used to configure the feature.
features : {
    eventTooltip : {
        // Configuration options are passed on to the tooltip instance
        // We want the tooltip's left edge aligned to the right edge of the event if possible.
        align : 'l-r'
    }
}
});

calendar.crudManager.on('load', () => {
    calendar.sidebar.widgetMap.resourceFilter.selected = ['bryntum'];
})

Please let us know if that helps!