Search code examples
javascripttwitter-bootstrapmodal-dialogslickgrid

SlickGrid in Bootstrap modal displays data only first two columns

I am using SlickGrid along with BootStrap. In my scenario, there is a SlickGrid table displayed on the page. Along with it, there is a pop-up which is supposed to display another table. I am populating the tables using for-loops. Now the problem description:

The table on the HTML page displays correctly along with all data. When I click on button to access the pop-up, only first two columns are populated, no matter what. eg. If I have 4 columns viz. Name, Age, Gender, SchoolName. When pop-up pops up, only Name and Age are populated. Other two columns are blank. So, I tried interchanging Age and Gender to check if there is anything wrong with Gender. Now, the table populates only Name and Gender leaving the Age and SchoolName columns blank. Same thing if I place other columns at first or second position. enter image description here

If similar code works for displaying table on a normal HTML page works, what stops from displaying it properly in the BootStrap modal?

EDIT: One more point- If I try to display 'that' table on HTML page, it displays correctly. But suffers in modal.

Solution

  • Make sure you're calling the .resizeCanvas() method on the grid after the modal has been shown and all the CSS transitions have completed. Lets say your Slick.Grid instance that lives inside the modal is named modalGrid:

    $('#modal').on('shown', modalGrid.resizeCanvas)