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" }
There should be dataSource specified so that you can use the combo.
We have a sample with combo and a grid, which you can review here.
Also you can send an isolated fiddle so that I can investigate what you are observing.
I have the igGrid-HTTPClient sample running locally and I modfied it to put a dropdown of product names in the product field and it is working so I'm comparing my code to that example now.
Ok, let us know what are your investigations and also if you could provide a sample for this, I'll be glad to investigate it and help you out.