Our blazing fast Grid component built with pure JavaScript


Post by bharat95 »

Hi,

I added textbox in tbar, I want to make that textbox as filter. If I enter text in the textbox it should apply filter on name column. Please help me how to achieve it. Thanks in advance

Thanks,
Bharat


Post by tasnim »

Hi,

Here is an example of how you could achieve this

    tbar : [{
        type : 'textfield',
        width : 300,
        label : 'filter name colum',
        onAction(props) {
            const { source, value } = props;
            const { store } = source.up('grid');
            store.filter(record => record.name.includes(value));
        }
    }],

https://bryntum.com/products/grid/docs/api/Core/data/Store


Post by bharat95 »

Hi,

It's working when i'm clicking on screen after adding text, but i want it to be filtered while writing.


Post by tasnim »

Hi,

Then you could use the input listener

    tbar : [{
        type : 'textfield',
        width : 300,
        label : 'filter name colum',
        listeners : {
            input(props) {
                const { source, value } = props;
                const { store } = source.up('grid');
                store.clearFilters();
                store.filter(record => record.name.includes(value));
            }
        },
    }],

https://bryntum.com/products/grid/docs/api/Core/widget/TextField#event-input


Post by bharat95 »

Hi,

It's working as expected, but it should be case insensitive and the filter should display only parent rows and not children's. Can you please help me with it?


Post by tasnim »

Hi,

Hopefully, this would be helpful for you

            listeners : {
                input(props) {
                    const { source, value } = props;
                    const { store } = source.parent.parent;
                    store.clearFilters();
                    if (value.trim() === '') {
                        store.clearFilters();
                    }
                    else {
                        store.filter(record => {
                            if (Boolean(record.name.toLowerCase().includes(value.toLowerCase()))) {
                                if (record.isLeaf) {
                                    return record.parent;
                                }
                                return record;
                            }
                        });
                    }
                }
            }

https://bryntum.com/products/grid/docs/api/Core/data/Model
https://bryntum.com/products/grid/docs/api/Core/data/Store


Post by bharat95 »

Hi tasnim,

For both upper and lower case it should filter data.
eg: if name is Tasnim, so if I type in lower or upper case, it should filter like tasnim or TASNIM.

Please help me with it


Post by tasnim »

Hi,

It seems to be working fine here with the above code I suggested

chrome_r5ZI4YnQyE.gif
chrome_r5ZI4YnQyE.gif (273.97 KiB) Viewed 224 times

I tried here https://bryntum.com/products/grid/examples/tree/


Post Reply