How to use agSelectCellEditor for dropdown values coming from database in Angular Grid

Question

I am using refData and agSelectCellEditor in Angular 8 to show the dropdown value upon editing. I refer to below link to solve my problem:-

https://www.ag-grid.com/javascript-grid-reference-data/

But dropdown list data is coming from Database via HTTP GET query. I am using "cellEditorParams" in agGrid which contain method "extractValues()" as you can see below. The problem is that the method runs before the data came from Database and this results to blank data. How to resolve the issue?

Ideally dropdown should contain values as "Yes/No". When I am declaring "objCategoryMappings" at the top with static list then it is working fine. Is there any limitation like "refData" dont work with dynamic list from database? If so then what is the alternative?

Please refer the code below. For simplicity I have set "Yes/No" statically inside subscribe method. In real scenario I would be using "objCategoryMappings" to store values from 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);
    }

}

Answer 1

why are you building the objCategoryMappings object after getting the grid row data ? as I see it's static and you don't need the api response to build it.

If you want to keep this logic then even the columns definition should done after the api response because it needs the objCategoryMappings data which is currently undefined at definition time :

export class CategoryComponent{
  categoryRowData: any[]; 
  objCategoryMappings = {};
  categoryColDef ;

  constructor() {
        this.getAllCategories();                  
  } 

 getAllCategories()
    {            
        this.categoryCommonService.getEntityData('getallcatgories')
            .subscribe((rowData) => {                 
                this.categoryRowData = rowData;               
                this.objCategoryMappings["f"] = "No";
                this.objCategoryMappings["t"] = "Yes";    
                this.createColumnsDefinition() ;            
            },
                (error) => { alert(error) });       
    }          

createColumnsDefinition(){
     this.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,            
        }];

...
}

and inside your html you need to wait for data receiving before rendering the grid as c_ogoo said :

<ag-grid-angular
  *ngIf="categoryColDef" 
  class="ag-theme-balham" 
  [gridOptions]="categoryGridOptions"
  [rowData]="categoryRowData" 
  [columnDefs]="categoryColDef"  
  (gridReady)="onGridReady($event)"
>
</ag-grid-angular>