How to Init CellEditor Dynamically with the result of a REST call

Question

I'm working on an app that uses Angular and Ag-Grid.

I have a column defined like following:

  columnDefs = [
        ...
        { 
          headerName: 'LANG', field:'lang', 
          autoHeight: true,cellClass: 'cell-wrap-text',sortable: false, filter: true, editable: true,
          cellEditor : 'agSelectCellEditor',
          cellEditorParams : ['English', 'Spanish', 'French', 'Portuguese', '(other)'];


        },
       ...

        ];

So everything works fine and in edit mode, I get the Combobox with the different options ('English', 'Spanish', 'French', 'Portuguese', '(other)'). My problem is that I need to get those options calling a REST WS.

So I have tried to define a variable in my Component (optionValues) and populating it in the "ngOnInit" method like this:

optionValues :  any;

columnDefs = [
        ...
        { 
          headerName: 'LANG', field:'lang', 
          autoHeight: true,cellClass: 'cell-wrap-text',sortable: false, filter: true, editable: true,
          cellEditor : 'agSelectCellEditor',
          cellEditorParams : this.optionValues,


        },
       ...

        ];

ngOnInit(){
  this.optionValues = this.http.get('http://localhost:8002/myservice');

}

But it didn't work, what is wrong here? Do I have to use a different approach?

Can you please help me?

this.http.get does not return an array, you need to subscribe to it — ABOS, Feb 05 '19 at 13:48
Thank you for your reply, can you please provide an example? — navy1978, Feb 05 '19 at 13:49
`this.http.get('http://localhost:8002/myservice').subscribe(v=>this.optionValues=v)` — ABOS, Feb 05 '19 at 13:50
Nothing changes, it looks the method ngOnInit() has no effect and in the console I see this alert: "ag-Grid: no values found for select cellEditor" — navy1978, Feb 05 '19 at 13:57
I have tried but I don't knw how to import "ag-grid-angular' there — navy1978, Feb 05 '19 at 14:20

score 3 · Accepted Answer · answered Feb 05 '19 at 14:13

3

you can initialize grid settings inside http,

this.http.get(...).subscribe(v=>{
  this.gridOptions = {
    columnDefs: [...]
  };
  this.optionValues=v;
});

answered Feb 05 '19 at 14:13

ABOS

3,723
3
17
23

I have tried, and it worked for me. I don't know how you did it, so if you can create a stackblitz, I will take a look – ABOS Feb 05 '19 at 14:52
btw, `cellEditorParams: { values: [...]}` is for current ag-grid – ABOS Feb 05 '19 at 14:54
1

use arr.map(v=>v.description) – ABOS Feb 05 '19 at 15:11
let `arr = [ { "id" : 0, "code" : "E", "description" : "English" }, { "id" : 1, "code" : "F", "description" : "Frenh" } ]` – ABOS Feb 05 '19 at 15:16

score 0 · Answer 2 · answered Dec 22 '22 at 15:10

In ag-grid the columns in gridOptions are used once at grid initialisation. If you change the columns after initialisation, you must tell the grid. This is done by calling gridOptions.api.setColumnDefs()

Details of this api method are provided in the ag-grid documentation here https://www.ag-grid.com/angular-data-grid/grid-api/

Angular Grid ag-grid columnDefs Dynamically change

How to Init CellEditor Dynamically with the result of a REST call

2 Answers2

Linked