[VUE] Combo field in grid

[Webethics]

Hello

I have trying to using the combo field in the grid columns. Everything is working fine only one issue I have faced and the issue is after adding and removing the option from the combo field, I have got the id in the selected field. Except for id I need to display the only text always in the field.

const cityCombo = {
    type        : 'combo',
    multiSelect : true,
    items       : [{'value':2,text: "England"},{'value':1,text: "United States"},{'value':3,text: "Australia"}],
    

};

const grid = new Grid({
    appendTo : 'container',

minHeight : '20em',

columns : [
    {
        text       : 'City',
        field      : 'city',
        flex       : 1,
        editor     : cityCombo,
        filterable : {
            filterField : cityCombo,
            filterFn    : ({ record, value }) => !value.length || value.includes(record.text),
        },
        renderer  : ({ record = ''}) => {
                        return record['city'] || 'N/A';
                    }
    },
],

data : [{city:["Australia","England"]},{city:""}]

});

I have followed the documentation from the link.
https://www.bryntum.com/docs/grid/#Core/widget/Combo

I need to use the combo field with the object.
https://prnt.sc/11g0yum

[alex.l]

Hi Webethics,

As I can see, your Grid's store has a name of the city as a value in the city field. But your Combo returns the id (or array of ids) as a value. You have to set https://www.bryntum.com/docs/grid/#Core/widget/Combo#config-valueField config to text in your combo if you want to have city name (text field) as a value, or use a simple array instead of objects for items:

const cityCombo = {
  type : 'combo',
  multiSelect : true,
  items : [ 'England', 'United States', 'Australia' ]
}

// second variant
const cityCombo = {
  type : 'combo',
  multiSelect : true,
  items : [{'value':2,text: "England"},{'value':1,text: "United States"},{'value':3,text: "Australia"}]
  valueField : 'text'
}

Thank you for the question. We will improve our docs with this information.

All the best,
Alex

[Webethics]

Thanks, it worked for me.