title: How to use agSelectCellEditor for dropdown values coming from database in Angular Grid
body: <p>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:-</p>
  
  <p><a href="https://www.ag-grid.com/javascript-grid-reference-data/" rel="nofollow noreferrer">https://www.ag-grid.com/javascript-grid-reference-data/</a></p>
  
  <p>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? </p>
  
  <p>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?</p>
  
  <p><a href="https://i.stack.imgur.com/LaO7D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LaO7D.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;ag-grid-angular class="ag-theme-balham" [gridOptions]="categoryGridOptions"
              [rowData]="categoryRowData" [columnDefs]="categoryColDef"  
              (gridReady)="onGridReady($event)"&gt;
          &lt;/ag-grid-angular&gt;
  </code></pre>
  
  <p><strong>TS File</strong></p>
  
  <pre><code>export class CategoryComponent{
    categoryRowData: any[]; 
    objCategoryMappings = {};
  
    constructor() {
          this.getAllCategories();                  
    } 
  
    getAllCategories()
      {            
          this.categoryCommonService.getEntityData('getallcatgories')
              .subscribe((rowData) =&gt; {                 
                  this.categoryRowData = rowData;               
                  this.objCategoryMappings["f"] = "No";
                  this.objCategoryMappings["t"] = "Yes";                
              },
                  (error) =&gt; { 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);
      }
  
  }
  </code></pre>