Bryntum Support Forums

Posted: **Thu Nov 10, 2022 12:34 am**

Hi Bryntum,

We are running into an issue with the Grid dropdown column field. When we try filtering the dropdown values by typing a value, it does not filter the dropdown values and show them. We have not been able to recreate the typeahead behavior with the config provided on the Bryntum grid demo with a dropdown.

 this.gridId = host.create('Grid',  {
column: [{
        text: 'City',
        field: 'city',
        flex: 1,
        editor: {
            type: 'dropdown',
            multiSelect: true,
            //Dear Dev:Julianne recommends disabling chipview for multiselect inside Grid cell
            chipView: false,
            items: [
                { value: 'Stockholm', text: 'Stockholm' },
                { value: 'Moscow', text: 'Moscow' },
                { value: 'Paris', text: 'Paris' },
                { value: 'Washington', text: 'Washington' },
                { value: 'San Francisco', text: 'San Francisco' },
                { value: 'New York', text: 'New York' },
                { value: 'Dubai', text: 'Dubai' },
                { value: 'Barcelona', text: 'Barcelona' },
            ],
        }]
});

Posted: **Thu Nov 10, 2022 4:30 am**

Hi Jink, you need to remove chipView: false for multiSelect combo.
https://bryntum.com/docs/grid/api/Core/widget/Combo#config-chipView

A config object to configure the ChipView to display the selected value set when multiSelect is true.
For example the itemTpl or iconTpl might be configured to display richer chips for selected items.

Posted: **Thu Nov 10, 2022 7:14 pm**

I have removed the chipView as well as set the multiSelect to false and the typeahead feature does not work. If I start typing the first several characters of a value then, the dropdown should displays the values that the characters exist in but, it does not.

Posted: **Fri Nov 11, 2022 4:23 am**

Does it work for you here? https://bryntum.com/examples/grid/columntypes/

with this config:

       {
        text: 'City',
        field: 'city',
        width: 200,
        editor: {
            type: 'dropdown',
            multiSelect: true,
            //Dear Dev:Julianne recommends disabling chipview for multiselect inside Grid cell
            items: [
                { value: 'Stockholm', text: 'Stockholm' },
                { value: 'Moscow', text: 'Moscow' },
                { value: 'Paris', text: 'Paris' },
                { value: 'Washington', text: 'Washington' },
                { value: 'San Francisco', text: 'San Francisco' },
                { value: 'New York', text: 'New York' },
                { value: 'Dubai', text: 'Dubai' },
                { value: 'Barcelona', text: 'Barcelona' },
            ],
            }
        }
        ,

Please record a video if it doesn't, looks like I don't understand what do you expect.

Posted: **Fri Nov 11, 2022 4:25 am**

Btw, I've opened a ticket to not collapse the list after first value selected. https://github.com/bryntum/support/issues/5565

Test editable combo here https://bryntum.com/docs/grid/api/Core/widget/Combo#multiselect--grouped-list

Posted: **Fri Nov 11, 2022 10:58 pm**

Hi Alex,

I have tried implementing the suggestion you recommended and it does not work on my end. I have attached a recording of the expected behavior.

Posted: **Sat Nov 12, 2022 11:25 am**

@jinc Don't see the attachment, try uploading again?

Posted: **Sat Nov 12, 2022 7:50 pm**

Oops! Looks like it did not get attached.

Posted: **Mon Nov 14, 2022 6:12 am**

I don't see chipView and multiSelect are enabled on your video, so it's not the code I suggested to use. Please make sure you used that code, rebuilt your app and cleared your cache. If all good, please post your full app code we can use to reproduce this issue. I just tested this with our LWC Grid example and works as expected.

Posted: **Mon Nov 14, 2022 8:32 pm**

Hi Alex,

I have implemented the config that you previously suggested:

{
        text: 'City',
        field: 'city',
        width: 200,
        editor: {
            type: 'dropdown',
            multiSelect: true,
            items: [
                { value: 'Stockholm', text: 'Stockholm' },
                { value: 'Moscow', text: 'Moscow' },
                { value: 'Paris', text: 'Paris' },
                { value: 'Washington', text: 'Washington' },
                { value: 'San Francisco', text: 'San Francisco' },
                { value: 'New York', text: 'New York' },
                { value: 'Dubai', text: 'Dubai' },
                { value: 'Barcelona', text: 'Barcelona' },
            ],
         }
}

and it is not working. It continues to display all dropdown options regardless of if I start typing a value like paris. I have attached the javascript with the code in it.

Bryntum Support Forums

[INFO REQ] [LWC] Grid dropdown field typeahead not working

[INFO REQ] [LWC] Grid dropdown field typeahead not working

Re: [INFO REQ] [LWC] Grid dropdown field typeahead not working

Re: [INFO REQ] [LWC] Grid dropdown field typeahead not working

Re: [INFO REQ] [LWC] Grid dropdown field typeahead not working

Re: [INFO REQ] [LWC] Grid dropdown field typeahead not working

Re: [INFO REQ] [LWC] Grid dropdown field typeahead not working

Re: [INFO REQ] [LWC] Grid dropdown field typeahead not working

Re: [INFO REQ] [LWC] Grid dropdown field typeahead not working

Re: [INFO REQ] [LWC] Grid dropdown field typeahead not working

Re: [INFO REQ] [LWC] Grid dropdown field typeahead not working