Our blazing fast Grid component built with pure JavaScript


Post by jinc »

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' },
            ],
        }]
});
Attachments
Screen Recording 2022-11-09 at 2.33.30 PM.mov
(2.42 MiB) Downloaded 67 times

Post by alex.l »

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.

All the best,
Alex


Post by jinc »

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.


Post by alex.l »

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.

All the best,
Alex


Post by alex.l »

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

All the best,
Alex


Post by jinc »

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.


Post by mats »

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


Post by jinc »

Oops! Looks like it did not get attached.

Attachments
Screen Recording 2022-11-11 at 12.53.31 PM.mov
(18.25 MiB) Downloaded 57 times

Post by alex.l »

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.

All the best,
Alex


Post by jinc »

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.

Attachments
demo_typeAheadCombo.js
(1.59 KiB) Downloaded 61 times

Post Reply