I have an IgGrid which I'm populating from a webservice and which is working perfectly. I want to use a dropdown of set values when updating a row. How do I populate the IgCombo dropdown from a webservice? I have tried to reinitialize the grid when the observeable returns but this is not working.

this.gridOptions = {

dataSource: [],

width: "100%",

height: "600px",

autoGenerateColumns: false,

columns: [

{ key: "ID", headerText: "ID", dataType: 'number', width: "10%" },

{ key: "ClientType", headerText: "Client Type", dataType: "string", width: "90%" }

],

primaryKey: "ID",

features: [

{ name: "Filtering" },

{ name: "Sorting" },

{ name: "Selection", mode: 'row', multipleSelection: false },

{

name: "Updating",

enableAddRow: true,

editMode: "row",

enableDeleteRow: true,

editRowEnding: this.updateClients,

columnSettings: [

{ columnKey: "ID", editorOptions: { type: "numeric", disabled: true } },

{ columnKey: "ClientType", editorType: 'combo', editorOptions: { mode: "dropdown", dataSource: this.clientTypesDropdown || [] } }

]

}

]

};

this.idsService.getData().subscribe(data => {

this.gridOptions.dataSource = data;

});

this.idsService.getClientTypes().subscribe(data => {

this.clientTypesDropdown = _.pluck(data, "Type");

jQuery('#' + this.id).igGrid(this.gridOptions);

});