How to map agSelectCellEditor values in agGrid to cell value

Question

When I am trying to edit cell then dropdown gets opened because I am using agSelectCellEditor in agGrid inside Angular 8 application. But I am not able to map "Yes" to selected value in dropdown editor.

I want to say that I have one row cell value as:-

When I edit it is selecting "No" as default. I want to set selected value in Dropdown mapped to cell value. Currently it is coming like this:-

What am I doing wrong here?

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 = {
        0: "No",
        1: "Yes",        
      };

  categoryColDef = [
       {
            headerName: 'Category Name', field: 'CategoryName',                        
            cellEditor: 'agLargeTextCellEditor',
            cellEditorParams: {
                maxLength: '50',
                cols: '20',
                rows: '1'
            }
        },
        {
            headerName: 'Is Subcategory', field: 'IsSubcategory',              
            cellEditor: 'agSelectCellEditor',
            cellEditorParams: {
                values: this.extractValues(this.objCategoryMappings),                                
            },                                          
            cellRenderer: (params) => {               
                return this.mapCategory(params);
            }, 
            refData: this.objCategoryMappings,            
        }];

    extractValues(mappings) {
        return Object.keys(mappings);
    }

    mapCategory(objRowData : any) : string
    {
        if (objRowData.data.IsSubcategory == 1)
            return "Yes";
        else if (objRowData.data.IsSubcategory == 0)
            return "No";        
    }
}

Answer 1

you need to stringify the IsSubcategory field before passing it to the grid :

this.categoryRowData.forEach(r => r.IsSubcategory += '') ;

and cellRenderer is no more needed for IsSubcategory column definition :

export class CategoryComponent{
  categoryRowData: any[]; // need to loop through rows and convert IsSubcategory to string.
  objCategoryMappings = {
        0: "No",
        1: "Yes",        
      };

  categoryColDef = [
       {
            headerName: 'Category Name', field: 'CategoryName',                        
            cellEditor: 'agLargeTextCellEditor',
            cellEditorParams: {
                maxLength: '50',
                cols: '20',
                rows: '1'
            }
        },
        {
            headerName: 'Is Subcategory', field: 'IsSubcategory',              
            cellEditor: 'agSelectCellEditor',
            cellEditorParams: {
                values: this.extractValues(this.objCategoryMappings),                                
            } 
            refData: this.objCategoryMappings,            
        }];

    extractValues(mappings) {
        return Object.keys(mappings);
    }
}