[ANGULAR] update combo data

[aramirez]

Hi guys,

I am trying to implement an inline edit on a field in a grid, I need to update the combo data on user input.

So our approach is to call an api with the search criteria and after that, update the combos data, but as soon as I update the data it refreshes and deletes whatever the user has typed previously.

I tried to used an ajaxStore and on user input update the data this way:

  public myStore: AjaxStore = new AjaxStore({
    id: 'Id',
    data: []
  });
  

 this.myStore.data = newData;

I also have tried without an ajaxStore and only having an items array with a combo but I could not find a way to update those items.

[marcio]

Hello aramirez,

For AjaxStore, we recommend you configure the endpoints to sync properly and avoid setting them directly like the snippet you shared.

You can achieve that with a Combo widget like the example (you can see more information here https://www.bryntum.com/docs/scheduler/api/Core/widget/Combo)

const combo = new Combo({
    items    : [{ value : 'MtnDew', text : 'Mountain Dew' }, 'Sprite', '7up'],
    label    : 'Not editable',
    editable : false,
    appendTo : 'container',
    style    : { marginRight : '.5em' }
});

// and to add more records, you can use the following
combo.store.add([{ value : 'New Item', text : 'New Item',}]);

So as you'll see, the combo has a https://www.bryntum.com/docs/scheduler/api/Core/widget/Combo#property-store which you can handle the data sync as you wish https://www.bryntum.com/docs/scheduler/api/Core/data/Store

[aramirez]

Hi Marcio,

Thanks for your response.

I need to replace the whole items/data with a new array so, your example to add does not work for this scenario, I am looking for something like this:

	combo.store.update([{ value : 'New Item', text : 'New Item',}]);

BTW, I cannot use the ajax store because we need to transform the data and according to this viewtopic.php?t=16367 , it is not supported yet.

[tasnim]

To replace the items array. you can first remove all the items and then add the new items array.
Docs :
https://www.bryntum.com/docs/scheduler/api/Core/data/Store#function-removeAll
https://www.bryntum.com/docs/scheduler/api/Core/data/Store#function-add

combo.store.removeAll();
combo.store.add([..]);

Good Luck ,
Tasnim

[aramirez]

Ok, after few hours playing around I have found what the issue is, if you add displayValueRenderer to the combo it will refresh the combo and delete whatever text the user has entered.