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']
// });