having difficulty dynamically inserting data into ag-grid

I'm currently attempting to dynamically populate the rows of ag-grid. The grid should only be displayed when a file is sent for validation and errors are detected. Below is my code:

columnDefs = [
    {headerName: 'S.No.', field : 'SNo'},
    {headerName: 'Error Description', field: 'Error_Description'},
    {headerName: 'Suggestion', field: 'Suggestion'}
  ];

rowData = [
    // {SNo :1, Error_Description:"Error 1", Suggestion: 'Suggestion 1'},
    // {SNo :2, Error_Description:"Error 2", Suggestion: 'Suggestion 2'},
    // {SNo :3, Error_Description:"Error 3", Suggestion: 'Suggestion 3'},
    // {SNo :4, Error_Description:"Error 4", Suggestion: 'Suggestion 4'}
  ];

index.html

<ag-grid-angular [hidden]="isValid" class="ag-theme-balham" style="width: fit-content" [rowData]="rowData" [columnDefs]="columnDefs">
        <!-- Show table -->
      </ag-grid-angular>

Dynamic Population of Grid Rows

for(var i=0; i<this.errorMsgs.length; i++){
        let errorObj={};
        errorObj["SNo"]=i+1;
        errorObj["Error_Description"]=this.errorMsgs[i];
        errorObj["Suggestion"]="Put Some Suggestion";
        this.rowData.push(errorObj);
      }

When I use the hardcoded values (commented values), I see the expected output. However, when I attempt to populate the grid dynamically, the data is not being displayed. The data is pushed into the rowData array but it doesn't show up in the table. What could I be doing wrong? Thanks in advance and apologies if this is a basic question, as this is my first experience working with ag-grid.

angulartypescriptag-grid-angular

Answer №1

If you are encountering issues with Angular's change detection, it could be the reason behind the problem. When you use the push method to add an element to an array, Angular may not detect the change because it typically focuses on changes in reference rather than value.

To address this, consider replacing:

this.rowData.push(errorObj);

with:

this.rowData = [...this.rowData, errorObj];

By using this approach, you are essentially creating a new array that includes the original elements of rowData along with the new errorObj. This method involves reassigning the reference of the new array to rowData and makes use of the spread syntax. For further insights, I suggest delving into the topic of spread syntax and reading up on Angular Change Detection.

Answer №2

To populate the grid with values, leverage setRowData() from gridApi. For best results, incorporate this function within the onGridReady method.

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

Creating a Button within the Dialog Component Header in PRIMENG for Angular 4

I need help adding buttons to the dialog window header in primeng. You can find the code at https://www.primefaces.org/primeng/#/dialog. The task is to insert two buttons (with icons like a calculator and question mark) on the right side of the top header ...

angularprimeng

Ways to enhance the type definitions for a built-in HTML element in Vue.js?

Imagine having an element that wraps around an input and inherits all of its properties, along with some extras. In React, you would define this as: interface ExtendedInputProps extends React.ComponentPropsWithoutRef<'input'> { some: T ...

typescriptvue.jsvuejs3

Utilizing a basic promise in Node.js to handle database queries efficiently

As someone who typically develops in Java, I am new to Node.js and trying to create a REST service that pulls data from Firebase and returns it as a JSON object. I've been grappling with the concept of "promises" and although I grasp the idea behind ...

node.jstypescriptrestexpresspromise

Issues with managing stages in Typescript using Quasar and Vue are obstructing progress

I'm completely new to working with vuex and I'm facing some challenges in getting it set up properly. Here is the current structure of my store folder: store module-example index.ts mutations.ts getters.ts state.ts index.ts store-flag.d.ts T ...

typescriptvue.jsvuexquasar-frameworkquasar

Errors are not displayed or validated when a FormControl is disabled in Angular 4

My FormControl is connected to an input element. <input matInput [formControl]="nameControl"> This setup looks like the following during initialization: this.nameControl = new FormControl({value: initValue, disabled: true}, [Validators.required, U ...

javascriptangulartypescriptangular4-forms

"What is the best way to connect a md-input to the value of a md-slider

I'm in the process of developing an application using Angular 2.0/meteor, and I'm facing a challenge with binding an input to md-slider. Below is the HTML code for the component: <div class="panel-body"> <form [formGroup]="filtreFor ...

javascriptjqueryangularmaterial-design

TypeScript - ensuring strict typing for particular object keys

In my current project, I am using typescript and working on defining an interface that has the following structure: interface SelectProps<T> { options: T[]; labelKey: keyof T; valueKey: keyof T; } The type T in this interface can vary i ...

javascripttypescript

Exploring ways to effectively test material2 icons using unit tests

This particular component utilizes material icons. https://i.sstatic.net/GpDSr.png Currently, I am delving into learning unit testing with karma (via angular cli/webpack) and have most of the configuration set up to create the component. However, I am en ...

unit-testingangulartypescriptangular2-directivesangular-material2

Failed to retrieve the image URL because the property 'ImagesUrl' is undefined

My current task involves fetching the site settings of an app using HTTP and then binding a property named "siteConfig.ImagesUrl". While the binding appears to be successful, it is also generating the following error: ERROR TypeError: Cannot read property ...

angularbindingangular-ng-ifangular2-observables

Encountering a snag when attempting to access a property following the invocation of a REST service in Angular

I recently started learning Angular and I am currently working on a practice application. My goal is to call a rest service and retrieve a specific property from the response object in Angular, but unfortunately, I encountered an error. Below you can find ...

angular

Is it impossible to conceal the status code error message in Angular 4's HttpClient?

After sending a post auth request to the server, I added an error handler for the request but encountered the following error in the console: POST http://localhost:7777/auth 401 (Unauthorized) http://prntscr.com/hdjm6h I intentionally sent a 401 code ...

angular

Adding a dynamic CSS stylesheet at runtime with the power of Angular and Ionic 2

Currently, I am working on creating a bilingual application using Ionic2. The two languages supported are English and Arabic. As part of this project, I have created separate CSS files for each language - english.css and arabic.css. In order to switch be ...

androidangularjscordovatypescriptionic-framework

The Primeng Angular2 checkbox malfunctioning issue

My form setup in Angular2 CLI looks like this: Inside the component export class UsersAddComponent implements OnInit { ngOnInit() { this.userForm = this._formBuilder.group({ role: ['', [Validators.required]], others: this._for ...

angulartypescriptcheckbox

Automated Async Saving in Angular 2 using Typescript

I am currently working on implementing an autosave feature in TypeScript. The main objective is to automatically save any text input by the user every 10 seconds to prevent loss of data in case of a page crash or accidental closure. I aim to initiate the a ...

angulartypescriptasynchronous

Is there a way to prevent npm from compiling with each keystroke in Visual Studio Code?

Currently, I am enrolled in a training program to enhance my skills in angular/node/npm. However, I have been facing an issue with npm constantly compiling my source code every time I make a keystroke in vs-code. Despite not having Auto-save enabled in v ...

node.jsangularnpmvisual-studio-code

Making sure to consistently utilize the service API each time the form control is reset within Angular 4

In the component below, an external API service is called within the ngOnInit function to retrieve an array of gifs stored in this.items. The issue arises when the applyGif function is triggered by a user clicking on an image. This function resets the For ...

javascriptangularangular-reactive-formsvaluechangelistener

Issue with data not refreshing when using router push in NextJS version 13

I have implemented a delete user button on my user page (route: /users/[username]) which triggers the delete user API's route. After making this call, I use router.push('/users') to navigate back to the users list page. However, I notice tha ...

reactjstypescriptnext.js

Is there a way to pass a form error to the parent component as a parameter in React?

I am just starting to learn React. I have created a form and I want to inform the parent component about any input errors that occur. I attempted to use the variable myError as a prop similar to how I used the next method, but unfortunately, it did not wor ...

reactjstypescript

Accessing a JSON value in SCSS for localization

I have a JSON file containing all the values that I want to use for internalization in my app. On the HTML side, I am able to retrieve the values, but on the CSS side, I am using a "before" pseudo-element. In my HTML, I am using the class "menu-input" li ...

cssangular

How can I hide the title bar on screens in expo?

As a newcomer to the world of react-native, I rely on YouTube tutorials to assist me in creating projects. Currently, I am working on developing an expo ui-app, however, each screen I create displays a title at the top, such as this example: https://i.ssta ...

javascriptreactjstypescriptreact-nativeexpo