Hi,
Currently I have a grid inside a div. When the browser is resized, the grid resizes as well. But I also have a need to only change the width of the div container that has the grid in it. Upon changing the width of the containing div only, the grid does not resize. Initally, the width of the div container is set to 50% of the browser window's innerwidth and the grid renders fine but when the div's width is changed to 100% of the window's inner width programmatically on some event , the grid does not occupy the whole width of the window(header, horizontal scrollbar appears as partially rendered, below) .Can you please suggest a solution /workaround for this?
initially:
after div container's width is changed to 100%:
Thanks,
B
When you changing DOM elements dimensions manually you have to call reflow method for the grid(this.grid.reflow();)
Regards,
Nadia Robakova
Thanks Nadia for your quick response. I tried using the reflow method but it does not re-render the grid after the parent div container's width was changed.
When you change the parent element width you need to call grid reflow in the requestAnimationFrame to can parent width be changed and after that grid to be reflowed.
Here is a sample with this:
https://stackblitz.com/edit/angular-c33boh-z5uhgz?file=app/grid/grid-filtering-sample/grid-filtering-sample.component.ts
Nadia
Thank you Nadia. I now have it working after calling grid reflow in requestAnimationFrame.