Menu
Using plain old javascript version of ag-grid.
I would like to destroy the ag-grid that is in a div from a button click event.
How do i destroy the grid?
535
api. destroy() to destroy the current grid, and then re-assign it to create a new one. For the purpose of example, the new grid will be created with an alternate row data.
There is a way you can achieve this. Have a flag for ngIf at the ag-grid-angular element level, and conditionally toggle it inside your event handler. This way, the grid will be reinitialised with the updated flag. Keep in mind that there is a performance cost involved here as the grid is being reinitialised.
Apporach 1: Use editing dialog You can make the edit button open an editing dialog and dispatch the new change to the store after the user closes it: Create a custom cell renderer for the button and dialog. In this example, I'll use Material-UI's Dialog . You can choose whatever dialog library you want however.
The gridOptions object is a 'one stop shop' for the entire interface into the grid, commonly used if using plain JavaScript. Grid options can however be used instead of, or in addition to, normal framework binding. The example below shows the different types of items available on gridOptions .
There is a method named destory().
As per documentation:
destroy()
Gets the grid to destroy and release resources. If you are using Angular (version 1 or 2) you do not need to call this, as the grid links in with the AngularJS 1.x lifecycle. However if you are using Web Components or native Javascript, you do need to call this, to avoid a memory leak in your application.
Have a look at the Plunk - Destroy grid I created.
gridOptions.api.destroy();
As you can see, by calling this function, the grid gets destroyed. As described in the documentation, it not only clears the DOM, but also takes care of memory leaks.
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
