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?
There is a method named destroy().
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.
Related
I've just started using ag-grid with vue, and noticed that sometimes onGridReady fires first, and sometimes onFirstDataRendered fires first. I was wondering if there was an event guaranteed to fire before both of those, so that I could set this.gridApi = grid.api once. (I'm currently setting it at the beginning of both as a workaround).
Update: this only seems to happen when the vue component containing the grid is initialized after page load (via a v:if), and not when it is visible on page load.
Actually you missed something I suppose, cuz onFirstDataRendered couldn't be executed before gridReady - cuz only after initialization (exact grid-ready event) - the grid itself would be ready to proceed.
Here is a hierarchy from ag-grid doc, which sais :
GridReadyEvent - will be executed very first.
I'm trying to use TinyMCE in a widget but it fails. I think the problem is that view is still hidden when "viewAttached" is fired. It seems that TinyMCE has a bug/feature (read last paragraph) and can't be displayed when the target (textarea) is hidden (or inside a hidden div).
I got it working by doing the job in a setTimeout but it's crappy.
Is there a callback that I could attached to which is fired after the view is unhided (after the transition is completed)?
I found one solution:
Explicitly subscribe to the "isNavigating" observable of the router and add TinyMCE when "isNavigating" value becomes false.
Still : this has the effect of flickering - you see the textarea and then it is replaced by TinyMCE... but this is not a Durandal problem IMO.
Edit 1
Finally, I think the the best solution (for now... follow the link below for the thread on the subject) is to do a setTimeout(xyz(), 0) - I have seen a lot of people using this technique and it prevents the flickering.
https://groups.google.com/forum/?fromgroups#!topic/durandaljs/5NpSwMBnrew
Durandal does have a callbacks when you're using composition - you just put a function on to your viewModel with the correct name. In your case, you would use viewAttached:
Here's the docs:
http://durandaljs.com/documentation/Interacting-with-the-DOM/
I have a Containerwith so many Labels added inside it. When I try to capture the pointerReleased event in this Container, I have found some problems. The event only is captured when I released in the free area of the Container, no when I made the release over the Labels. Is there any way to encapsulate this event? I mean when I will do the realase over the main Container(instead I'm on a Label), the event must be launched.
Here you can take a look at my Container
You should look at the lead component feature added in LWUIT 1.5, it allows you to define a component that manages the entire hierarchy of container/component and all events for every component in the hierarchy are sent to it.
This adds another benefit of handling the style synchronization between all the different elements (e.g. if you use a button all components will become pressed together).
I dont' find any cool solution, so finally I propagate the pointerReleased from the Labelsto the Container.
I'm trying to use a custom video player NPAPI plugin (view FireBreath) inside an tabbed ExtJS application. The plugin lives in one tab, and the others contain presentations of other non-video data.
When switching from tab to tab, the element that contains the plugin is destroyed, and all plugin state is lost. Is there any way to configure an ExtJS tabbed panel so that the html contained in it is not altered when switching to another tab (just hidden)? The alternative is to re-populate the plugin state when returning to the tab, but this would be associated with an unacceptable delay (mostly while waiting for video key frames).
Thanks,
O
I don't know about your ExtJS approach, if you can solve it on that side that would of course be preferrable.
However, if you can't, you can avoid the reinitialization by moving the stream handling to a helper application that is running in the background. The plugin would launch it as needed and receive the stream data from it after registering for it.
The helper would be told when to kill a stream and possibly kill it by itself after some timeout (to avoid session leaks in case of crashing plugins etc.).
I was about to consider a helper application as recommended above, or look into rewriting the plugin to be windowless. Both might be more robust solutions for other JS frameworks.
Fortunately, the solution ended up being simpler than this, at least for ExtJS. By default, ExtJS sets "display: none" on the tabbed view's div whenever it is undisplayed, which calls the plugin destructor. After doing a little more looking through their enormous API, ExtJS has a parameter hideMode as part of the Ext.panel.Panel base class:
'display' : The Component will be hidden using the display: none style.
'visibility' : The Component will be hidden using the visibility: hidden style.
'offsets' : The Component will be hidden by absolutely positioning it out of the visible area of the document. This is useful when a hidden Component must maintain measurable dimensions. Hiding using display results in a Component having zero dimensions.
Defaults to: "display"
Setting the parent Panel that contains the plugin to hideMode: 'offsets' fixed the problem perfectly.
From last few months I am working on gwt-ext.In that I am using a doLayout() method of Container class.Here is description of it.
Force this container's layout to be recalculated. A call to this function is required after adding a new component to an already rendered container. If you are not dynamically adding and removing components after render, this function will generally not need to be called.
Do this method is basically used to render container.
Now I am using core gwt 2.3. Is there any method to render the container in gwt.or any other way to achieve this ???
Thanks in advance
AFAIK, GWT does not require this. Just call .add() on any Panel to add children. They should be immediately visible.