Our blazing fast Grid component built with pure JavaScript


Post by kkruger »

I added infinite scrolling to the grid and have a handler in the before sort to reload the data sorted .

private get bryntumStore(): Store {
        const store: Store = new Store();
        store.data = this.actionItems;
        const boundedBeforeSort: (event: any) => Promise<void> = async (event: any) => {
            this.loading = true;
            console.log(event);
            this.$refs.grid.gridInstance.scrollToTop();
            this.sortBy = event.sorters[0].field;
            this.ascending = event.sorters[0].ascending;
            this.actionItems = await (this.dataGenerators[this.selectedTab].next()).value(
                100,
                this.sortBy,
                this.ascending
            );
            this.loading = false;
            return event;
        }
        store.on({
            beforeSort: boundedBeforeSort
        })
        return store;
    }
   

If I click the header and console log the event. inside the sorters object its ascending, ascending, descending, ascending, ascending, descending... For some reason it fires ascending on the first two clicks and I end up having to click the header three times to get it to sort descending. Is the changing of the store data during the before sort throwing everything off? Since I am doing infinite scroll I do not think I have the option of doing ajaxStore. Thanks for any help you can provide!


Post by saki »

Check please the return value of the listener. If it is boolean false then the event is cancelled. See please: https://bryntum.com/docs/grid/#Core/data/mixin/StoreSort#event-beforeSort

If it does not help, post please a showcase that we could run, investigate and debug.


Post by kkruger »

Thanks Saki, it has a return value of a promise. I changed the promise to return true. Am I not allowed to have a promise for the beforeSort handler?


Post by saki »

If your promise does not evaluate as boolean false it shouldn't matter. The relevant code in StoreSort mixin is:

        if (!silent && me.trigger('beforeSort', { sorters : me.sorters, records, currentSorters }) === false) {
            // Restore sorters
            me.sorters = currentSorters;

            // Restore sorting direction if toggled
            if (currentDir !== null) {
                curSort.ascending = currentDir;
            }

            return;
        }

beforeXxxx events are cancellable by returning false from the listener, beforeSort being one of them.


Post Reply