Bryntum Support Forums

Posted: **Wed Mar 17, 2021 2:37 pm**

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

Posted: **Wed Mar 17, 2021 4:51 pm**

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 (32.95 KiB) Viewed 690 times

Posted: **Wed Mar 17, 2021 9:45 pm**

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

Bryntum Support Forums

Filter on a 'check' column in the Grid

Filter on a 'check' column in the Grid

Re: Filter on a 'check' column in the Grid

Re: Filter on a 'check' column in the Grid