This page extends async background post-rendering to accept a cleanup function.
The column asyncPostRender property sets a function to manipulate the cell DOM node directly.
The new column asyncPostRenderCleanup property sets a function to properly clean up the data
and/or events created in the render phase.
Post processed nodes are detached from the DOM rather then deleted, and the detached node is queued
for cleanup using the same time-delayed technique that is used for rendering.
It is still important to make sure that post-processing and cleanup of rows doesn't take too long.
SlickGrid will figure out what and when needs to be updated for you.
The example below is a list of 500 rows with a title and 5 integer cells followed by graphical representation of
these integers.
The graph is drawn using a CANVAS element in the background.
The grid is editable, so you can edit the numbers and see the changes reflected (almost) immediately in the graph.
The graph cell behaves just like an ordinary cell and can be resized/reordered.
The more heavyweight jQuery Sparklines 2.x is used in this example because it requires explicit jQuery cleanup and
will leak memory if the DOM node is instead directly deleted.
This example page logs cleanup and render operations to the console to allow easy confirmation of the order of
operations, but this is not recommended except in the case of debugging.
Post-render cleanup must be enabled using the option enableAsyncPostRenderCleanup. If post-rendering is
enabled with the enableAsyncPostRender option, but cleanup is not enabled, then SlickGrid will directly
remove DOM nodes. This way is more efficient where post-rendered nodes do not require explicit resource cleanup.