Our blazing fast Grid component built with pure JavaScript


Post by dave@mogolabs.com »

I found a bug that when values are provided in the combo, it's not filtering. I researched about this on the forum and there was only one answer that if you want to multiselect search you can do 'store.filter()' . If I use store.filter I lose the visibility of what I have selected in the filter bar.

Please go here and paste the code. As you see from the code, if I put the store.filter at the bottom, it filters well but the filter bar selected items disappear. If I don't put the store.filter, it always

https://www.bryntum.com/examples/grid/filterbar/


import { Grid, Toast, DataGenerator } from '../../build/grid.module.js?450605';
import shared from '../_shared/shared.module.js?450605';

const cityCombo = {
    type        : 'combo',
    multiSelect : true,
    items       : DataGenerator.cities,
    value: ['Paris', 'Dubai', 'New York']
};

const grid = new Grid({
    appendTo : 'container',

minHeight : '20em',

features : {
    filterBar : {
        compactMode : false,
        //filter      : [{ property : 'city', value : ['Paris', 'Dubai', 'New York'] }]
    },
    stripe    : true,
    quickFind : true
},

columns : [
    {
        text  : 'Name (custom)',
        field : 'name',
        width : 150,
        // This column has a custom filtering function that matches the first letter in each word (JBA -> John B Adams)
        filterable({ value, record }) {
            const matches = record.name.match(/\b(\w)/g);
            return matches ? matches.join('').startsWith(value) : false;
        }
    },
    { text : 'Age', field : 'age', width : 100, type : 'number' },
    {
        text       : 'City',
        field      : 'city',
        flex       : 1,
        editor     : cityCombo,
        filterable : {
            filterField : cityCombo,
            filterFn    : ({ record, value }) => !value.length || value.includes(record.city)
        }
    },
    { text : 'When', field : 'start', flex : 1, type : 'date' },
    // This column has filtering turned off
    { text : 'Team (not filterable)', field : 'team', flex : 1, filterable : false }
],

data : DataGenerator.generateData(100),

tbar : [
    {
        type        : 'button',
        ref         : 'useCompact',
        text        : 'Use compact mode',
        icon        : 'b-fa-square',
        pressedIcon : 'b-fa-check-square',
        toggleable  : true,
        onToggle    : ({ pressed }) => {
            if (pressed) {
                Toast.show({
                    html    : 'Compact mode - Click a column header and type to filter',
                    timeout : 5000
                });
            }
            grid.features.filterBar.compactMode = pressed;
        }
    },
    {
        type     : 'button',
        ref      : 'removeAll',
        text     : 'Remove all filters',
        icon     : 'b-fa-times',
        onAction : () => grid.store.clearFilters()
    }
]
});

// this filtering works but it removes the filter bar selected values
// grid.store.filter({
//  property:'city',
//   value:['Paris', 'Dubai', 'New York']
// });


Post by saki »

This is an issue. I've created a ticket here: https://github.com/bryntum/support/issues/2951

Thank you very much for reporting it.


Post Reply