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);
Hello,
You are probably losing the reference to clientTypesDropdown with the following -> dataSource: this.clientTypesDropdown || []
Make sure you have defined clientTypesDropdown and if there is no data for it at that point assign empty array to it.
And then pass only clientTypesDropdown as a dataSource, this will retain the reference to the variable and changing it will affect the dataSource too.
I made the changes your recommended but the dropdowns still don't populate. I then tried to set the value to a hard coded array and reinitialize the grid and it didn't populate either. When I output gridOptions.features the datasource property does not exist.
console.log(JSON.stringify(this.gridOptions["features"]));
{ "columnKey": "ClientType", "editorType": "combo", "editorOptions": { "mode": "dropdown" }