Grid in Div is not coming properly when we are Hiding and Showing Div.

[Ashutosh]

In Razor view i have Three divs out of which Two divs are hidden,in hidden div i have declare one div for Grid and i am generating that Grid using html,When i am showing that hidden div then Grid in that div is coming at the left top corner with small size.
When i am clicking on it, it's showing that Grid properly.
I am Showing and Hiding these div using "js" file.

(When i am removing hidden property from that div and loading that div it's not giving me any Problem)i.e
Working Fine Without Hidden:
<div id="xyz" >
<div id="Grid_ID"/>
</div>

Issue  With Hidden Property:
<div id="xyz" hidden="hidden">
<div id="Grid_ID"/>
</div>

I have attached the Snap shot,Kindly Find those.

[Dimo]

Hello Ashutosh,

Layout adjustments and size calculations do not work for elements placed inside hidden containers. I suggest you to do the following when showing a <div>, which holds a Grid:

1. Make sure the Grid wrapper <div> has the expected width and height.

2. Call the resize(true) method of the respective Grid instance.

http://docs.telerik.com/kendo-ui/web/grid/appearance#initialize-the-grid-inside-a-hidden-container

Regards,
Dimo
Telerik