SlickGrid data not visble

[rockall81]

Hi,

  I have written an agualer directive to load the slick table. the issue i have is it some time shows the data and some time does not.

  Not sure why

    <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>

on some user action i call service which returns results
then set it to $scope.results =results;

Then i call some thing like this
    $('#TestModal').appendTo("body").modal('show');

  which will load me the dialog, at this moment the slickgrid table is empty.

Any idea?

i set the grid data in this way in my directive

        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 thoughts?

[rockall81]

Hi done fmore debugging on the slickgrid version we are using .i.e 2.1 when the slick grid tries to update the data, it comes to below code ..function renderRows(range) {... and removes all the rows it is suppose to render. any idea? .


  for (var i = range.top; i <= range.bottom; i++) {
        if (rowsCache[i]) {
          continue;

[rockall81]

ok i have fixed it by adding a code like this  (not resize canvas did not work)

 $("#Id of my grid").children(".slick-viewport").css( "height", "300px" );

Just wanted to know what is the alternative?

[Jared Hall]

When slickgrid is initialized it thinks that the height of the div is already set to 0.  Just apply your style to the div before you initialize slick grid. The most sensible way to do that is probably with css.