Initialize the Grid in a TabStrip

Environment

Product	Telerik UI for ASP.NET Core Grid and Telerik UI for ASP.NET Core TabStrip
Progress Telerik UI for ASP.NET Core 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.

1. Handle the Activate event of the TabStrip.

2. 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.
       )

   Razor

       @addTagHelper *, Kendo.Mvc
   
       <kendo-tabstrip name="tabstrip" on-activate="onActivate">
           <!-- Other configuration -->
       </kendo-tabstrip>

   JS

   <script type="text/javascript">
       function onActivate(e) {
           let activatedTab = $(e.item).attr("id"); // Get the "id" of the activated tab.
           if (activatedTab == "tabStrip-tab-2") { // For example, if the Grid is defined in the second tab, check if the tab is activated.
               $("#grid").getKendoGrid().resize(true); // Resize the Grid to fit the tab's container.
           }
       }
   </script>

For a runnable example based on the code above, refer to the following REPL samples:

• Sample code with the Grid and TabStrip HtmlHelpers
• Sample code with the Grid and TabStrip TagHelpers

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core

• Server-Side API Reference of the Grid for ASP.NET Core

• Server-Side TagHelper API Reference of the Grid for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base