ag-grid's onGridReady function is not functioning properly

I am trying to dynamically load ag-grid when a button is clicked, but I have encountered issues with both of my approaches.

Here is my code for the first method:

 onBtnClick(){
    this.gridOptions ={
        onGridReady : function(){
            console.log("print");
        }
    }
}

For the second method, I have the following code:

onBtnClick(){
    this.onGridReady();
}
onGridReady(){
   this.gridApi = params.api;
    console.log("print");
}

Unfortunately, the first method is not working as expected, and the second method is throwing an error saying that 'api' is not defined.

javascriptangulartypescriptgridag-grid

Answer №1

Consider adopting this particular method.

  1. Include a flag within your component to determine when to show the grid.
  2. Utilize this flag to conditionally display the grid using *ngIf
  3. Adjust the value of this flag upon button click

By following this approach, the template containing ag-grid will not be rendered until the flag is activated. Once activated, the template will render and execute onGridReady.

<button (click)="btnClick()">Display grid</button>
<ag-grid-angular *ngIf="displayGrid"
  #agGrid
  ......
></ag-grid-angular>


btnClick(){
  this.displayGrid = true;
}

Take a look at this functional demo: ag-grid display on button click

Answer №2

Are you certain that ag-grid is properly linked to onGridReady?

It should resemble the following code snippet:

<ag-grid-angular
 ...
 (gridReady)="onGridReady($event)"
>
</ag-grid-angular>

Answer №3

It would greatly help if you could provide more of your code since it's difficult to understand what you are trying to accomplish.

Ensure that your gridOptions are fully configured before the grid is initialized. Setting them up on a button click is too late.

ngOnInit(): void {
  this.gridOptions.onGridReady = gridReadyHandler;
}
gridReadyHandler = (params: GridReadyEvent) => {
  this.gridApi = params.api;
  console.log("The grid has finished loading", this.gridApi);
}

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

Encountering Problem with Jmeter Script Playback - Kindly Activate JavaScript to Access Page Information

I'm currently experiencing a challenge when trying to simulate the following scenario in my JMeter script. I would truly appreciate any assistance or solutions you can offer. My goal is to create a JMeter script for a form submission process within a ...

javascript.nethttp-redirectjmeterembedded-resource

subscriptions to behavior subjects may not function properly across all components

When setting up my global service, I instantiate a BehaviorSubject variable dataWorkflowService: export class CallWorkflowService { url = 'http://localhost:3000/'; selectedNode : BehaviorSubject<Node> = new BehaviorSubject(new Node(&a ...

javascriptangularrxjssubscriptionbehaviorsubject

What is the equivalent of defining conditional string types in Typescript similar to flow?

type UpsertMode = | 'add' | 'update' | 'delete'; interface IUpsertMembers { mode: UpsertMode; } const MagicButton = ({ mode: UpsertMode }) => { return ( <button>{UpsertMode}</button> ); } const Upse ...

javascriptreactjstypescript

What steps can I take to troubleshoot issues when creating a React app?

While attempting to set up a react application using npx create-react-app projectreact, I encountered the following error message: PS C:\Users\ahnaa\OneDrive\Documents\Web Developent\Reaact JS> npx create-react-app project ...

javascriptnode.jsreactjsnpm

I recently used the ng new ang-routing command to generate a fresh Angular project in my directory, but encountered an error while doing so

npm ERR! syscall read npm ERR! errno ECONNRESET npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/@angular-devkit%2fbuild-angular: read ECONNRESET npm ERR! network This issue is likely caused by connectivity problems. ...

angularnpm

An error encountered while trying to utilize the npm convert-units package within an Ionic 4 application

In my Ionic 4 app, I am utilizing version 2.3.4 of the npm package called convert-units. To install this package in my Ionic 4 application, I used the CLI command: npm i convert-units --save However, upon importing the library with import { convert } fro ...

angulartypescriptionic4

Instructions for displaying a React component in the <main> element when employing react-burger-menu

Check out my code here. Utilizing react-burger-menu has allowed me to successfully implement the sidebar feature. The sidebar functionality is working as expected. My current challenge involves figuring out how to open the content for Home or GG within ...

javascriptreactjs

“Unlocking the secret to extracting color from an image in React Native”

While it may sound like a silly question, I am new to the world of React technology. I am looking to extract colors from an image - for example, when a user selects an image to upload, I want to identify all the colors used in that image. If this is possib ...

javascriptreactjsreact-nativeecmascript-6

How can I refresh a Vue.js component when a prop changes?

Initially, I utilize a random number generator to create numbers that will be used in my api call created() { for (let i = 0; i < this.cellNumber; i++) { this.rng.push(Math.floor(Math.random() * 671 + 1)); } These generated numbers are stored in an a ...

javascriptvue.jsasynchronous

Encountering a "args" property undefined error when compiling a .ts file in Visual Studio Code IDE

I've created a tsconfig.json file with the following content: { "compilerOptions": { "target": "es5" } } In my HelloWorld.ts file, I have the following code: function SayHello() { let x = "Hello World!"; alert(x); } However ...

javascripttypescriptvisual-studio-code

Converting the following ngRx selector to a boolean return – a guide

I am currently using the following filter to retrieve a list of data within a specific date range. I have implemented logic in the component where I check the length of the list and assign True or False to a variable based on that. I am wondering if ther ...

angulartypescriptngrxngrx-store

When a user clicks on a specific element's id, the image will rotate accordingly

When the elements in ul are clicked, the image rotates. The default position of the image is already rotated by a certain number of degrees, and on each click, it rotates to the desired value. This was achieved using the following code: $("#objRotates"). ...

javascriptjqueryrotation

Updating a marker in real-time using API response

I'm trying to create a simple web application that allows users to enter a city name in an input box, which then triggers the updateMap function to geolocate and map the city with a marker. After mapping the city, another function called updateTemp is ...

javascriptjqueryajaxgoogle-maps

Child object in Three.js does not inherit transformation from its parent

Consider a scenario where there is a main object with multiple child objects in a given scene. Update: Here is the code snippet for creating a mesh (assuming the scene and camera are already set up). Code snippet for creating the parent group: var geome ...

javascriptmatrixthree.jstransform

Transferring user inputs to the server through jQuery-AJAX

I've encountered some issues when trying to send form data inputs to the server. Despite alerting each form input, I keep getting empty alerts. Here's my code snippet: With my current code, it only alerts 0. However, posting normally seems to wor ...

javascriptphpjqueryajax

What are the reasons behind memory leaks and decreased rendering speed when I exit and then reopen a React component (specifically Material-Table)?

I have been working on a basic React example for learning purposes, and I incorporated the use of material-table in one of my components. However, I noticed that each time I change pages and reopen the component (unmount and mount), the rendering speed of ...

javascriptreactjstypescriptrendermaterial-table

Is there a way to execute a PHP script using Ajax without needing any return values?

Currently, I am attempting to execute a php script with ajax without needing any output or echos. Is there a method to achieve this? Below is the approach I have taken: $('button')[1].click(function () { $.ajax({ met ...

javascriptphpajax

What steps do I need to follow to develop a checkbox component that mirrors the value of a TextField?

I am working with 3 components - 2 textfields and 1 checkbox Material UI component. My goal is to have the checkbox checked only when there is a value in one of the textfield components. What would be the most effective way to achieve this functionality? ...

reactjstypescriptcheckboxmaterial-uitextfield

Simplify a function by lowering its cyclomatic complexity

This particular function is designed to determine whether a specific cell on a scrabble board qualifies as a double letter bonus spot. With a cyclomatic complexity of 23, it exceeds the recommended threshold of 20. Despite this, I am unsure of an alterna ...

typescriptcyclomatic-complexity

What could be causing the NoScript tag to malfunction across different web browsers?

I've incorporated the NoScript tag into my JSP pages in the head section. To avoid conflicts with tiles, I made sure not to include multiple NoScript tags. However, I am experiencing issues in Internet Explorer where it doesn't seem to be working ...

javascripthtmljsp