grid as a local variable in snipplet

Hello,
I want to modify the two-grid example for display each grid on demand of the user (ie when clicks on a button) in a alternate manner (hidding one of them when the other is visible).
In order to do this i need to declare locally the Active grid object, populate it and desttroy it every time the user fires the click event of the button.
Can you show me how to do it? I'm getting troubles with the in-line functions to attach events because in the example the two grids are global variables to the html page.
Thank you.

You don't have to destroy grid JS object, you can keep them both. You only have to send one HTML string to your page and replace it later with HTML from the second grid. Instead of document.write() you can use innerHTML:

container.innerHTML = grid1;
...
container.innerHTML = grid2;

For actions and events you can use 'this' keyword instead of the global reference to the grid object. The grid runs the events and actions as its own methods, so 'this' refers to the grid itself.

But, what happends if I've 10 different grids on my page? this doesn't affect the performance?
Thank you

Grid does not create internal copy of the cells data. It requests data on demand through data model interface when asked to provide HTML output. So having several idle grid objects should not affect the performance (I guess).