Our blazing fast Grid component built with pure JavaScript


Post by henrique »

After I update my system do latest version start to give the error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')
    at CollectionFilter.defaultFilterBy (grid.umd.js:56121:27)
    at CollectionFilter.filter (grid.umd.js:56201:17)
    at grid.umd.js:56256:26
    at me._filtersFunction [as _filterBy] (grid.umd.js:13292:20)
    at CollectionFilter.filter (grid.umd.js:56201:17)
    at grid.umd.js:56256:26
    at Array.filter (<anonymous>)
    at Collection.onFiltersChanged (grid.umd.js:55521:37)
    at Collection.trigger (grid.umd.js:49485:25)
    at Collection.splice (grid.umd.js:55223:10)

If open the source in the line showed, the value of _propertyItems is undefined, why, I don't know.

To fix I changed the if with this

if (me._propertyItems?.length > 1) {

Fixed the problem.


Post by marcio »

Hey Henrique,

How is your Grid configured?? It's not very clear to confirm that's a bug behavior or a missing configuration.

You can check this guide as well to understand how to set up an example for us viewtopic.php?f=1&t=772

Best regards,
Márcio


Post by henrique »

I will try to create a sample!


Post by henrique »

I have found the problem. I filled the callOnFunctions in the filter config and start give the error. The sample below:

const cityCombo = {
    type         : 'combo',
    valueField   : 'name',
    displayField : 'name',
    cls          : 'city-combo',
    chipView     : {
        iconTpl : () => '<i class="b-icon b-fa-city"></i>'
    },
    listItemTpl : ({ name }) => `<i class="b-icon b-fa-city"></i>${name}`,
    picker      : {
        cls              : 'city-list',
        allowGroupSelect : false
    },
    store : {
        idField  : 'name',
        groupers : [
            { field : 'region', ascending : true }
        ],
        data : [
            { name : 'Stockholm', region : 'Europe' },
            { name : 'Barcelona', region : 'Europe' },
            { name : 'Paris', region : 'Europe' },
            { name : 'Dubai', region : 'Middle East' },
            { name : 'Istanbul', region : 'Middle East' },
            { name : 'Riyadh', region : 'Middle East' },
            { name : 'New York', region : 'US' },
            { name : 'San Francisco', region : 'US' },
            { name : 'Washington', region : 'US' },
            { name : 'Moscow', region : 'Russia' },
            { name : 'St Petersburg', region : 'Russia' }
        ]
    }
};

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

features : {
    filterBar : {
        compactMode : false,
        filter      : { callOnFunction: true }
    },
    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 : Object.assign(cityCombo, { multiSelect : true })
        }
    },
    { 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()
    }
]
});

Post by marcio »

Hey henrique,

That is happening because callOnFunction should be set in the same level as compactMode, as you'll see here https://www.bryntum.com/docs/grid/api/Grid/feature/FilterBar#config-callOnFunctions

filterBar : {
	compactMode    : false,
	callOnFunction : true
},

Best regards,
Márcio


Post by henrique »

I'm using the Filter feature, not the FilterBar, so, for me is a bug.


Post by marcio »

Hey henrique,

So, if you're using the Filter feature https://www.bryntum.com/docs/grid/api/Grid/feature/Filter you'll need to set it up at the features object level, in the example that you shared, you set up at the FilterBar configuration level. You should have something like this

features : {
	filter      : { callOnFunctions: true },
	stripe    : true,
	quickFind : true
},

and like that, you'll have the callOnFunctions config https://www.bryntum.com/docs/grid/api/Grid/feature/Filter#config-callOnFunctions

Best regards,
Márcio


Post by henrique »

If I do this gives the error I commented on at the beginning, attached image with the error.

Error.png
Error.png (125.48 KiB) Viewed 509 times

I'm sorry, I didn't see you sent the wrong example.


Post by marcio »

Thanks for clarifying that configuration henrique! I reproduced here and created a ticket for fix it https://github.com/bryntum/support/issues/5215

Best regards,
Márcio


Post Reply