resizeCanvas doesn't work when slick grid is collapsed

Question

I have a accordion which collapse a slick grid. I am trying to resize my slick grid when I make the page smaller. Everything is working when the grid is opened but if the grid is collapsed and when i change the size of the page then click the accordion the data does not display correctly in slick grid.

$(window).resize(function () {
            grid.resizeCanvas();               
        });

Answer 1

I finally found a solution for that.

<div id="accordion">
        <h3>Credits</h3>
        <div id="griddiv">
            <div id="grid" data-bind="slickGrid: { data: items, columns: columns }"></div>
        </div>
</div>

$(window).resize(function () {
        grid.resizeCanvas();

});

$('#griddiv').on('shown', grid.resizeCanvas)

$("#accordion").click(function () {
        grid.resizeCanvas();
});