Utilizing refData and agSelectCellEditor in Angular 8 to display dropdown values during editing. I found a solution at the following link:
https://www.ag-grid.com/javascript-grid-reference-data/
However, the dropdown list data is fetched from the Database through an HTTP GET query. I am using "cellEditorParams" in agGrid, which includes the "extractValues()" method as shown below. The issue arises when the method runs before the data is retrieved from the Database, resulting in blank data. How can this problem be resolved?
Ideally, the dropdown should display values like "Yes/No". When I manually declare "objCategoryMappings" at the beginning with a static list, it works fine. Is there a limitation when it comes to using "refData" with dynamic lists from the database? If so, what is the alternative solution?
https://i.sstatic.net/LaO7D.png
Please refer to the code below. For simplicity, I have set "Yes/No" statically inside the subscribe method. In a real scenario, I would use "objCategoryMappings" to store values from the database.
HTML
<ag-grid-angular class="ag-theme-balham" [gridOptions]="categoryGridOptions"
[rowData]="categoryRowData" [columnDefs]="categoryColDef"
(gridReady)="onGridReady($event)">
</ag-grid-angular>
TS File
export class CategoryComponent{
categoryRowData: any[];
objCategoryMappings = {};
constructor() {
this.getAllCategories();
}
getAllCategories()
{
this.categoryCommonService.getEntityData('getallcatgories')
.subscribe((rowData) => {
this.categoryRowData = rowData;
this.objCategoryMappings["f"] = "No";
this.objCategoryMappings["t"] = "Yes";
},
(error) => { alert(error) });
}
categoryColDef = [
{
headerName: 'Category Name', field: 'CategoryName',
cellEditor: 'agLargeTextCellEditor',
cellEditorParams: {
maxLength: '50',
cols: '20',
rows: '1'
}
},
{
headerName: 'Is Subcategory', field: 'IsSubcategory', //Values coming from db as "f" and "t"
cellEditor: 'agSelectCellEditor',
cellEditorParams: {
values: this.extractValues(this.objCategoryMappings),
},
refData: this.objCategoryMappings,
}];
extractValues(mappings) {
return Object.keys(mappings);
}
}