How to refresh UI-Grid layout after reloading data

Question

I have a problem with Angular UI-Grid (http://ui-grid.info/). Grid is implemented in modal window that appears after user clicks button. Service works that way: User selects data set to prepare and clicks button. After clicking button website sends request to rest service to receive data. After receiving data modal with table is shown. Columns count depends on data requested by user.

The problem is that after user changes columns width and close modal with this table UI-Grid 'remembers' this column width that user left. If then user will select another set of data I am cleaning GridOptions object and fill it once again after data is received. The problem is that row width stays in previous state. I tried so far:

• using apis core.refresh() method - while debugging I can see that this method fires some event but no effect on my grid,
• remove whole DOM node and append it again before receiving response with new data
• various different hacks trying to use many methods found inside grid api - no success at all.

I am sorry that I am unable to reproduce this in any fiddle but it would be really difficult I am afraid to match my case.

Any help would be very appreciated. Thanks

ps. it also applies to my another table where user can pin and hide columns. Pinned/hidden columns remains hidden/pinned after receiving brand new data. And it is not cool.

Solution

Once you set the data to the grid, you should be calling this -

gridApi.core.notifyDataChange( uiGridConstants.dataChange.ALL)  

From the docs,

Notifies us that a data change has occurred, used in the public api for users to tell us when they've changed data or some other event that our watches cannot pick up

notifyDataChange tells the framework that one of the options or columnDefs has been changed.

Checkout this thread