slickgrid data not visible
angularjs, directive, jquery, slickgrid
Solution
Make sure that when you inspect the top-level `<div>` (the one you initialize `new Slick.Grid()` with) it has a set width and height. Also make sure you're calling `myGrid.resizeCanvas()` only after the modal has been shown and all the CSS transitions have completed:
$('#TestModal').on('shown', myGrid.resizeCanvas)
Problem
I have written a slickgrid directive, but it does not seem to be displaying the data. if i do inspect element in chrome, then i can see the `slick-viewport`, and `grid-canvas` divs, where my data is rendered. i did try `resizeCanvas` which had no effect. Basically grid rows are renedered but it is not visible. My modal looks like this ``` <div id="TestModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 900px; margin-left: -450px"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Results</h3> </div> <div class="modal-body"> <myGrid rows="results" //results = tow way bind to controller columns="columns" //columns =two way bind to controller width="1100px" height="200px"/> </div> <div class="modal-footer"> <button ng-class="dialogButtonClass" data-dismiss="modal" aria-hidden="true">Select</button> <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> </div> </div> ``` and the codel launch it looks like this `$('#TestModal').appendTo("body").modal('show');` Then i follow the documented way of rendering the data i.e ``` var view= this.grid.getData(); // To set the entire the data then use this view.beginUpdate(); view.setItems(data, "id"); view.collapseGroup(0); view.endUpdate(); ``` Any help appreciated.