Kendo UI: Grid header(width) alignment issue inside tabstrip

[Mark]

I have used KENDO UI two Tabstrips.

Tabstrip One.
Tabstrip Two.

and both tabstrip contains a kendo Grid inside and Grid inside Tabstrip One is fixed column grid (2 fixed column) and 8 scrollable columns.

Issue: The grid inside Tabstrip One will take some 20-30 seconds to load after the page load.
The header of the Grid inside the Tabstrip One breaks, If i navigate to Tabstrip Two before the grid inside the Tabstrip One loading and comes back to Tabstrip One after the grid inside the Tabstrip One finished loading. See the First Image.
However if i click inspect on the Grid header the Grid header comes back to Normal (by self setting the k-grid-header width) See the second Image.

Please let me know if anybody faced similar type of issues.
Thanks in advance

[Ivan Danchev]

Hello Mark,

Complex components like the Grid, the Gantt, etc. when initialized in initially invisible containers (theTabStrip's tab for example, or a Dialog) in some scenarios need a call to their resize() API method when the container becomes visible, so that they can properly re-calculate their dimensions.

Here's an article that demonstrates how to call the resize() method of a Grid in the TabStrip's "activate" event handler: https://docs.telerik.com/kendo-ui/controls/navigation/tabstrip/how-to/initiliaze-grid-in-tabstrip

Regards,
Ivan Danchev
Progress Telerik