Our blazing fast Grid component built with pure JavaScript


Post by Jiri Horcicka »

Dear colleagues, could you advice me if it's possible to use Grid.feature.Filter on a column type: 'check'?

I tried to use the following construct but doesn't work for 'check' column.

We want to allow selection of some records in the table via the checkbox and want to allow the user to filter out only those which are checked or those which are still unchecked.

let grid = new Grid({
    appendTo: document.body,
    
features: { filter: true }, autoHeight: true, data: DataGenerator.generateData(5), columns: [{ type: 'rownumber' }, { type: 'check', text: 'CheckColumn', field: 'done', flex: 1 }, { type: 'date', text: 'DateColumn', field: 'start', flex: 1 }, { type: 'number', text: 'NumberColumn', field: 'rank', flex: 1 }, { type: 'percent', text: 'PercentColumn', field: 'percent', flex: 1 }, { type: 'rating', text: 'RatingColumn', field: 'rating', flex: 1 }, { type: 'template', text: 'TemplateColumn', field: 'city', flex: 1, template: ({ value }) => `Lives in ${value}` }, { type: 'widget', text: 'Widget', field: 'color', flex: 1, widgets: [{ type: 'button', cls: 'b-raised b-orange' }] } ] });

Post by pmiklashevich »

You can apply filter to the store and filter it by the "done" field. If you need a UI element to be able to filter the column, you can add a simple combo, or any UI widget you want:

columns: [{
            type: 'check',
            text: 'CheckColumn',
            field: 'done',
            flex: 1,
            filterable: {
                filterField: {
                    type: 'combo',
                    editable: false,
                    items: [{
                            text: 'YES',
                            value: true
                        },
                        {
                            text: 'NO',
                            value: false
                        }
                    ]
                }
            }
        },

You can try it in FilterBar demo locally (Grid/lib/Grid/feature/FilterBar.js)

Снимок экрана 2021-03-17 в 17.51.03.png
Снимок экрана 2021-03-17 в 17.51.03.png (32.95 KiB) Viewed 671 times

Pavlo Miklashevych
Sr. Frontend Developer


Post by Jiri Horcicka »

Thank you very much Pavel. This looks like a good solution. I will pass it to my colleagues.


Post Reply