slickgrid data not visible

Question

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.

Answer 1

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)