Initialize the Grid in a TabStrip
Environment
Product | Telerik UI for ASP.NET MVC Grid and Telerik UI for ASP.NET MVC TabStrip |
Progress Telerik UI for ASP.NET MVC version | Created with the 2024.2.514 version |
Description
How can I display the Grid component in a specified tab of a TabStrip?
By design, when the Grid is initialized inside a hidden container, its layout may not be resized correctly. For example, when the Grid is integrated into the TabStrip component, the Grid initializes when the respective tab activates. For more information, refer to the Grid in hidden containers article.
Solution
You can apply the same approach when integrating the Grid into a PanelBar or Window components, which also act as hidden containers for the Grid.
-
Handle the
Activate
event of the TabStrip. -
Get a reference to the Grid and call the
resize()
method when the Grid becomes visible.Razor@(Html.Kendo().TabStrip() .Name("tabStrip") .Events(e => e.Activate("onActivate")) ... // Other configuration. )
For a runnable example based on the code above, refer to the REPL example on displaying a Grid in a TabStrip component.