How can I swap between multiple grids in slickgrid?

Question

I would like to create multiple grids and switch between them using a dropdown. They occupy the same screen real estate but only one is visible at a time. I have tried to implement this using a CSS class with display none, then using the dropdown to call jquery's show method on the desired one. However, the grid's vertical scrollbar is messed up and no data rows are shown.

You can duplicate this easily using the basic example provided with slickgrid.

Answer 1

Try hiding the other grids by setting "visibility:hidden" and not "display:none". Alternatively, initialize the grid lazily when it is displayed.