The editing process in agSelectCellEditor allows for the retrieval of an object from the cell

Currently integrating agGrid into my Angular8 project. I have a specific column that needs to display an exact mapped value in a dropdown whenever I want to edit it. To achieve this, I am utilizing agSelectCellEditor. Here's a snippet of the code I'm working with:

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";        
        }
    }

Upon clicking on a cell, a dropdown appears as displayed in the snapshot linked below:- https://i.sstatic.net/8UcAj.png

Could you please provide guidance on what I might be overlooking in this setup?

angulartypescriptangular8ag-grid-angular

Answer №1

Your objCategoryMappings should be updated as follows:

objCategoryMappings = {
   0: "No",
   1: "Yes",        
};

To avoid creating an array, make sure to remove the square braces.

When using Object.keys(objCategoryMappings), you will get 0 and 1 as values. If you prefer 'No' and 'Yes', use 

Object.keys(mappings).map((key) => mappings[key]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Develop a component library for Angular 2 without incorporating inline styles

I recently came across an interesting article about developing an Angular 2 component library that utilizes inline styles. Is there a method to create a library in Angular 2 without relying on inline styles? I also stumbled upon another resource, but it d ...

angularnpmlibraries

While utilizing the imodel.js front-end for designing a custom geometric model, I ran into an issue while trying to display it

Utilizing imodel.js front-end, I was able to design a customized geometric model featuring elements like a collection box. However, when placing the model within the existing SpatialViewState in bim, it failed to display properly in the current view. Sub ...

javascripttypescriptimodeljs

Using Angular ngClass with a conditional statement

Incorporating data from a JSON file instead of a database, my goal is to assign a color to the icon based on the status value in the JSON. For instance, [if green? class1:class2]. Here is the code snippet I am working with: My HTML file <ng-containe ...

htmlcssangular

Is there a way to adjust the font size for the label in mat-step?

Is there a way to update the design using only inline styles and CSS? Below is the code snippet I am working with: <div class="statusbar"> <mat-horizontal-stepper linear > <mat-step label="One" [complet ...

htmlangularfont-size

Implementing strong security measures for Angular and .Net Core APIs using Azure AD authentication and defining specific application roles

My system is a combination of Angular front end and .Net Core API back end. Both are set up as distinct Active Directory apps in the Azure Portal. As a result, both applications are protected by Azure AD. The API is exposed and interacted with by authenti ...

c#angularazureazure-active-directory

Using Angular's typeahead with RxJs switchMap for subscribing to data sources

Implementing the Angular bootstrap Typeahead plugin for displaying colors. However, I am facing difficulty in resolving circular references like I have done in other parts of my project. The RxJs SwitchMap operator is not working for me in this case. Are t ...

angularrxjsng-bootstrapbootstrap-typeahead

Intro.js is not compatible with React and Remix.run

I am currently working on implementing onboarding modals for header links using intro.js within a React environment. Below is the code snippet: import { useState, type FC } from 'react' import type { Links } from '../types' import &apo ...

reactjstypescriptserver-side-renderingremix.runintro.js

Is there a possible solution to overcome the type error when utilizing dynamic environment variables in conjunction with TypeORM and TypeScripts?

I'm currently working on a backend project using the TsED framework, which leverages TypeScript and ExpressJS. To work with TypeORM, I have also integrated the dot-env package in order to utilize custom environment variables sourced from a .env file ...

typescriptexpresstypeorm

Angular 2: A Glimpse into the File Contents

Currently working on a project where I need to aggregate multiple XML files with the same structure. The process involves users dropping their XML files, making some edits, and receiving an XML file with all the necessary data organized in a list of elemen ...

angular

What is the best way to send multiple data using GetServerSideProps?

I have a challenge where I need to pass multiple sets of sanity data into a component, but I am restricted to using getServerSideProps only once. How can I work around this limitation to include more than one set of sanity data? pages > members.tsx exp ...

typescriptnext.jssanity

Creating a type in TypeScript with keys as values taken from another type

There is an object const navigatorNames: NavigatorNamesType = { homeNavigation: 'HomeNavigation', authNavigation: 'AuthNavigation' } with the type defined as type NavigatorNamesType = { homeNavigation: 'HomeNavigation ...

reactjstypescriptreact-native

Combining meanings within a geometric interface

When setting up my routes, I like to include an additional field in the configuration. This is how I do it: app.config([ '$routeProvider', ($routeProvider: ng.route.IRouteProvider) => { $routeProvider ...

angularjstypescripttypescript-typings

Unexpected issue with Ionic 4 subarray returning as undefined even though the index is accurate

When attempting to use console.log to view the value, I noticed that the value of noticeSet2[index] is undefined. However, when I print noticeSet, all the data in the array is displayed. Additionally, after printing the index using console.log, it correctl ...

javascripthtmltypescriptionic-frameworkionic4

Create a unique NPM package tailored to my needs, available for easy installation across all of my projects

My plan is to create a custom "skin" on top of bootstrap for various UI projects. Instead of manually copying and pasting styles and components from my current Angular 5 project, I want to develop an NPM package that can be easily installed in new projects ...

node.jsangularnpmpackage-managers

Please click twice in order to log in to Angular 16

Whenever I attempt to log in, I face the issue of having to click twice. The first click does not work, but the second one does. Additionally, an error message pops up: TypeError: Cannot read properties of undefined (reading 'name'). I am unsure ...

angularangularjstypescriptjwtfrontend

Utilizing AES encryption in C# and decrypting it in Angular, converting it from a byte[] / number array with the help

I am looking to securely encrypt and decrypt a byte[] in a C# API endpoint, then convert the decrypted document to base64 for viewing in a PDF viewer within an Angular 14 app. I came across this helpful guide on Stack Overflow [https://stackoverflow.com/q ...

c#arraysangularencryptionaes

Exploring various instances of an Angular 2 component to showcase diverse data

In one of my Angular 2 applications, I have a basic side menu that displays a list of different classRoom options, each with its own set of users. To switch between the various class rooms, I use the routerLink feature provided by Angular. The issue I am ...

angularjsangularangular2-routingangular2-services

Testing Angular with Jasmine: The spy should have been called as expected

Seeking assistance for a persistent issue that has been troubling me. I am currently working on unit tests for a component I developed, and no matter what I try, I can't seem to resolve the recurring problem of an "Expected spy getTopRatedMedia to ha ...

angulartypescripttestingjasminekarma-runner

Identifying the modifications made to a Firestore list, including additions, deletions, and changes

Utilizing Firestore as the backend has allowed me to navigate basic crud methods effectively. However, I am curious about how to identify changes within a list of returned items after the initial subscription. My goal is twofold: - Minimize the number of ...

javascriptangulargoogle-cloud-firestoreangularfire2

How can we add a key:value pair at a specific position in an array in Angular 2 using Typescript?

Is there a way to insert a key value pair at a specific index in an array? I am currently struggling with this task. Here is the code I have been working on: this.quiz.push( { "question-no":this.no, "Ans":this.ans } I require this functionality to ...

arraysobjecttypescriptkey-valueangular2-directives