Grid is not re-rendering when entering a full-screen mode

Hi, I am using ui-grid inside a "Portlet" from the Metronic - Layout 4 theme.

One of the features I needed is to have a full-screen button that users can click on to enter a full screen and work on the page without any distractions.

What happens is that, when the page enters full screen, the grid does expand to cover all the width of the page, however, the last column will end before the borders of the grid (right-side).

If I resize the window when in full screen, the grid renders again and covers entire width and the last column takes all the remaining width.

When I get out of full-screen, the grid borders cover the page, however, last column width keeps the previous width and goes outside the grid boundary.

Is there a method to refresh UI on the ui-grid? maybe that will solve the problem so that I can call it when a resize happens (full screen or back to the normal screen).

Some images to view in order: 1. 2. 3.

To view a sample of full-screen functionality (without ui-grid): Portlet Light Full Screen

The source code used for full-screen functionality is: $("body").on("click", ".portlet > .portlet-title .fullscreen", function(e) { e.preventDefault(); var portlet = $(this).closest(".portlet"); if (portlet.hasClass("portlet-fullscreen")) { $(this).removeClass("on"); portlet.removeClass("portlet-fullscreen"); $("body").removeClass("page-portlet-fullscreen"); portlet.children(".portlet-body").css("height", "auto"); } else { var height = App.getViewPort().height - portlet.children(".portlet-title").outerHeight() - parseInt(portlet.children(".portlet-body").css("padding-top")) - parseInt(portlet.children(".portlet-body").css("padding-bottom")); $(this).addClass("on"); portlet.addClass("portlet-fullscreen"); $("body").addClass("page-portlet-fullscreen"); portlet.children(".portlet-body").css("height", height); } });