Applying a default/initial filter to eventStore in tree group doesn't clear afterwards

[taauntik]

Forum Post

In scheduler tree grouping demo

replace the code of that demo with the code below

import { StringHelper, ResourceModel, Scheduler } from '../../build/scheduler.module.js?470382';
import shared from '../_shared/shared.module.js?470382';

class Gate extends ResourceModel {
    static get fields() {
        return [
            { name : 'capacity', type : 'number' },
            { name : 'waiting', type : 'number' },
            { name : 'domestic', type : 'boolean' }
        ];
    }
}

const
    // Group by capacity, in steps of 50
    sizeGrouper = ({ capacity }) => `Capacity ${Math.floor(capacity / 50) * 50} - ${(Math.floor(capacity / 50) + 1) * 50 - 1}`,
    // Group by waiting time, None, Less than an hour or More than an hour
    waitingTimeGrouper = ({ waiting }) => waiting === 0 ? 'None' : waiting < 60 ? 'Less than an hour' : 'More than an hour',
    // Group by domestic or international
    domesticGrouper = ({ domestic }) => domestic ? 'Domestic' : 'International';

const scheduler = new Scheduler({
    appendTo   : 'container',
    eventColor : null,
    eventStyle : null,

features : {
    tree      : true,
    // Enable the TreeGroup feature, which can transform the tree's structure
    treeGroup : {
        // Initially transformed with a single parent level based on capacity
        levels : [sizeGrouper]
    }
},

rowHeight : 45,
barMargin : 5,

columns : [
    {
        type  : 'tree',
        text  : 'Name',
        width : 220,
        field : 'name'
    },
    {
        type  : 'number',
        text  : 'Capacity',
        width : 90,
        field : 'capacity',
        align : 'right'
    },
    {
        type  : 'number',
        text  : 'Waiting time',
        width : 90,
        field : 'waiting',
        align : 'right'
    },
    {
        text   : 'Domestic',
        width  : 90,
        field  : 'domestic',
        align  : 'center',
        editor : null,
        renderer({ value }) {
            if (value) {
                return {
                    tag       : 'i',
                    className : 'b-fa b-fa-times'
                };
            }

            return '';
        }
    }
],

startDate  : new Date(2022, 8, 12, 8),
viewPreset : 'hourAndDay',

crudManager : {
    autoLoad      : true,
    resourceStore : {
        modelClass : Gate
    },
    loadUrl : 'data/data.json'
},

// Custom eventRenderer, used to colorize the flights depending on the waiting time at the gate
eventRenderer({ eventRecord, resourceRecord, renderData }) {
    renderData.cls.add(
        resourceRecord.waiting > 60 ? 'purple'
            : resourceRecord.waiting > 30 ? 'apricot'
                : resourceRecord.waiting > 5 ? 'cyan'
                    : 'green'
    );

    return StringHelper.encodeHtml(eventRecord.name);
},

tbar : [
    {
        type        : 'buttongroup',
        ref         : 'buttons',
        toggleGroup : true,
        items       : [
            {
                text    : 'Capacity',
                pressed : true,
                async onToggle({ pressed }) {
                    if (pressed) {
                        // The buttons are disabled during grouping, since it is an async operation
                        buttons.disable();
                        await scheduler.group([sizeGrouper]);
                        buttons.enable();
                    }
                }
            },
            {
                text : 'Waiting time',
                async onToggle({ pressed }) {
                    if (pressed) {
                        buttons.disable();
                        await scheduler.group([waitingTimeGrouper]);
                        buttons.enable();
                    }

                }
            },
            {
                text : 'Domestic + capacity',
                async onToggle({ pressed }) {
                    if (pressed) {
                        buttons.disable();
                        await scheduler.group([domesticGrouper, sizeGrouper]);
                        buttons.enable();
                    }

                }
            },
            {
                text : 'None',
                async onToggle({ pressed }) {
                    if (pressed) {
                        buttons.disable();
                        await scheduler.clearGroups();
                        buttons.enable();
                    }
                }
            }
        ]
},
{
            type : 'button',
            ref  : 'testButton',
            text : 'Add extra Filter',
            onClick() {
                scheduler.eventStore.filterBy(e => e.id < 5)
            }
        },
{
            type : 'button',
            ref  : 'testButton',
            text : 'Remove Filter',
            onClick() {
                scheduler.eventStore.clearFilters();
            }
        }
    ]
});

const { buttons } = scheduler.widgetMap;
scheduler.eventStore.filterBy(e => e.id < 10)

Then comment out the last line scheduler.eventStore.filterBy(e => e.id < 10) You'll see all events are available. Uncomment the code now and try removing the filters using the remove filter button on tbar You'll see nothing changes in the UI

[matsbryntse]

test pushed to 7456-treegroup branch

[isglass]

Fixed by fixing https://github.com/bryntum/support/issues/7516