AG-Grid is created, all the structure and settings are fixed. However, one particular issue presents itself when trying to insert dropdown options. The grid begins to render immediately as the page is constructed. There is no clear way to actually modify the options after the grid has been rendered.
So, here is how to do it.
I have a grid with a column for “General Foreman”. The user needs to be able to pick the foreman from a dropdown menu. However, the foreman names come from a json object array which is downloaded asynchronously. So, when the grid was rendered there were no values in my array of foremen. The way to fix it is to bind the options to a function which returns the list.
First, make a function which returns a list of values. I generally have mine in an object array, so I need to extract them and just make an array like this [“Joe”,”Bob”,”Mary”, “Frank”].
I have a service called “datastore.service.ts” that I inject into my component. Inside, I have a property called “generalForemanOptionsArray”. That array starts out as [].
generalForemen() {
let options = this.dataStore.generalForemanOptionsArray;
options.unshift(""); /* Just add a blank value in case there is no person selected */
return { values: options }
}
// Then in the column, we use the bind function
{
headerName: "General Foreman", sortable: true, field: "generalForeman", hide: true, editable: true, enableValue: true, enableRowGroup: true, enablePivot: true,
cellEditor: "agRichSelectCellEditor",
cellEditorParams: this.generalForemen.bind(this),
},
Ok, so now we have an empty array. The grid has rendered and the only option available is a blank record. Now, at any time, I can update the generalForemanOptionsArray to contain a list of values and the grid will display those options when the select box is activated. Every single time it is activated, it will seek out that function and use its results to generate the options.
Honestly, that took FOREVER to figure out!
ALTERNATIVELY
You can actually use route resolvers to do this. With that method, you’d be pulling in your data when the route is activated and the page wouldn’t begin to render until all the data was loaded. Then, you’d have the data before the grid was set up and you could use those select box options in the original column definitions. If you already use route resolvers, then that’s probably the best way to go. In my case, however the options are sometimes different depending upon the job. For example, if the job is taking place in Region A, it can only offer a selection of Foremen who are available to work in Region A. So, even if I used a route resolver to get the data initially, I would STILL have to modify them after the fact using a bind().
