Search code examples
slickgrid

onRendered callback

I need to implement a sought of onRendered() event that would ensure all of the grid is rendered before I do something, which is to .hide() it. My gaol is to have a .hide() and .show() button attached to the div the grid resides in, with the default status set at hidden. The problem is that at the point in which my script executes the initial .hide(), the grid is not fully created yet by the grid.js script. I would rather not do any delay loop. Much rather have a callback.

Any help would be appreciated

Thanks Pat

Solution

  • This should work without a callback. I have a SlickGrid app where I show and hide the grid in response to UI events. The grid exists as soon as it is instantiated (with new Slick.Grid) and can be manipulated with the .hide()and .show() methods.

    I did find one catch though...

    If you create the div tag with display: none (so it is initially hidden) the grid columns do not initialise properly. To workaround this I create the div tag with visibility: hidden and remove this style before using the .hide()and .show() methods.

    My code looks roughly like this:

      <div id="mygrid" style="visibility: hidden"></div>

  $grid = $("#mygrid")

  grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions);

  // Hide grid by default, remembering to remove the visibility style
  $grid.hide();
  $grid.css("visibility", "visible");

  // You can now show and hide the grid using normal jQuery methods
  $grid.show();
  $grid.hide();

    Hope this helps.