Our pure JavaScript Scheduler component


Post by outputlogic-kc »

We have the following TimeAxisHeaderMenu on a Scheduler component that works flawlessly in v5.1.3:

timeAxisHeaderMenu: {
    items: {
        currentTimeLine: {
            text: 'Highlight today'
        },
        eventsFilter: {
            text: 'Filter absence types',
            menu: {
                items: {
                    nameFilter: {
                        clearable: true,
                        cls: "b-eventfilter b-last-row",
                        label: 'By type',
                        type: 'combo',
                        store: this._eventTypeStore,
                        valueField: 'id',
                        displayField: 'absenceType',
                        editable: false,
                        listItemTpl: (item) => {
                            return `<div><div style="font-size: 80%">${item.absenceCategory}</div><div>${item.absenceType}</div></div>`;
                        },
                        width: 250
                    }
                }
            }
        }
    }
}

After updating to v5.3.0, this produces the correct UI elements, but upon selecting an option from the combo box, all events in the Scheduler suddenly disappear, regardless of the option chosen. Opening the context menu again and clearing the filter does not fix this, but if the user then attempts to set another filter, the events magically reappear again when hovering the mouse over the "Filter absence types" menu item!

I have attached a screen recording of all of this in action for your greater understanding.

Many thanks in advance for any help with this :-)

Attachments
filter-absence-scheduler.mp4
(1.89 MiB) Downloaded 30 times

Post by tasnim »

Hi,

Thanks for your report. Sounds like a bug. We'll investigate it. Here is the ticket to track progress https://github.com/bryntum/support/issues/6477

Good Luck :),
Tasnim


Post by mats »

I can't see how that ever worked, the eventsFilter always filtered by name and you filter on a different field. The right way to do this would be to hide the default filter we add and then add your own:

eventsFilter : {
                    text : 'Filter absence types',
                    menu : {
                        items : {
                            nameFilter     : false,
                            categoryFilter : {
                                clearable    : true,
                                label        : 'By type',
                                type         : 'combo',
                                store        : { data : [{ id : 1, absenceType : 'A1' }, { id : 2, absenceType : 'A2' }, { id : 3, absenceType : 'A3' }] },
                                valueField   : 'id',
                                displayField : 'absenceType',
                                editable     : false,
                                listItemTpl  : (item) => {
                                    return `<div><div style="font-size: 80%">${item.absenceCategory}</div><div>${item.absenceType}</div></div>`;
                                },
                                listeners : {
                                    change({ value }) {
                                        const { eventStore } = this.up('menu').owner;
                                        if (value) {
                                            eventStore.filter('absenceCategory', value);
                                        }
                                        else {
                                            eventStore.clearFilters();
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

Post Reply