Our blazing fast Grid component built with pure JavaScript


Post by gregc »

I have a lot of filtered columns (see end for one example) that have multiSelect combo boxes.
When you type into the filter it filters the list and you can select your entry.
Image

But when you stop typing and click on the item in the list it does select it, but you are also left with the letters you are typing still there, which you have to then backspace to get rid of.

Image

{
    text: 'Status',
    field: 'f5',
    resizable: true,
    sortable: true,
    filterType: 'text',
    filterable: {
        filterField: {
            valueField: 'refId',
            displayField: 'display',
            type: 'combo',
            multiSelect: true,
            items: [{
                refId: '0',
                display: ''
            }, {
                refId: '2427332',
                display: 'Assigned'
            }, {
                refId: '2427337',
                display: 'Canceled'
            }, {
                refId: '2427335',
                display: 'Closed'
            }, {
                refId: '2427333',
                display: 'In Process'
            }, {
                refId: '2427336',
                display: 'On Hold'
            }, {
                refId: '2427331',
                display: 'Open'
            }, {
                refId: '2427338',
                display: 'Reopened'
            }, {
                refId: '2427334',
                display: 'Resolved'
            }]
        }
    },
    editor: {
        type: 'combo',
        valueField: 'refId',
        displayField: 'display',
        items: [{
            refId: '0',
            display: ''
        }, {
            refId: '2427332',
            display: 'Assigned'
        }, {
            refId: '2427337',
            display: 'Canceled'
        }, {
            refId: '2427335',
            display: 'Closed'
        }, {
            refId: '2427333',
            display: 'In Process'
        }, {
            refId: '2427336',
            display: 'On Hold'
        }, {
            refId: '2427331',
            display: 'Open'
        }, {
            refId: '2427338',
            display: 'Reopened'
        }, {
            refId: '2427334',
            display: 'Resolved'
        }]
    },
    renderer: ({
            value,
            column
        }) => column.editor.store.getById(value)?.get('display') ? column.editor
        .store.getById(value)?.get('display') : value,
    autoHeight: true
},
Last edited by gregc on Fri Mar 05, 2021 9:47 pm, edited 1 time in total.

Post by pmiklashevich »

You can add a listener to clear the input text:
https://www.bryntum.com/docs/grid/#Core/widget/Combo#event-select

new Combo({
            listeners: {
                select() {
                    if (this.multiSelect) {
                        this.input.value = '';
                    }
                }
            },

I've opened a ticket to add such config: https://github.com/bryntum/support/issues/2494

Pavlo Miklashevych
Sr. Frontend Developer


Post by gregc »

works for me, thanks!


Post Reply