Displaying grid within tab is causing the grids scroll bar to appear and overflow

[Shane P]

I am trying to move a grid (that's styling is perfect outside of a tab) into a tab to make the most of some limited space.

My problem is the scrollbar within the grid now appears and I don't know how to get rid of it.

My code looks like

<ul class="mainnav hover-list submenu hidden">

               <li id="liHome" class="first"><a href="/">Settings</a></li>

               <li id="liBusiness"><a href="/business">Product Setup</a>

               </li>

           </ul>

           <div id="tabstrip" style="height:400px">

               <ul>

                   <li class="k-state-active">Setup</li>

                   <li>Products</li>

               </ul>

               <div>

                  

                   <div class="weather">

                       <p>

                           Rainy weather in Paris.</p>

                   </div>

               </div>

               <div>

                  

                   <div class="weather">

                       <table id="grid" class="products">

                           <thead>

                               <tr>

                                   <th style="width: 40px">

                                       <input type="checkbox" class="select-all" />

                                   </th>

                                   <th data-field="name">

                                       Name

                                   </th>

                                   <th data-field="sku">

                                       Sku

                                   </th>

                                   <th data-field="tags">

                                       Tags

                                   </th>

                                   <th data-field="AssociatedReward">

                                       Product Assigned To

                                   </th>

                               </tr>

                           </thead>

                           <tbody>

                               <tr>

                                   <td colspan="5">

                                   </td>

                               </tr>

                           </tbody>

                       </table>

                      

                   </div>

               </div>

               <div class="clear">

               </div>

           </div>

I have tried to set the height of the grid to different heights however always the same result. 

Are grids supported within the tab control?

I have attached an image on the outputted html

[Dimo]

Hi Shane,

The problem is caused by the fact that Javascript size calculations do not work for elements that are inside a hidden container, such as the TabStrip's inactive tabs. As a result, the Grid is not able to adjust its layout properly.

Possible solutions include -

- initialize the Grid once it becomes visible
- adjust the Grid's data area height (the div.k-grid-content element) manually when its tab is selected
- disable Grid scrolling

For options 1 and 2, you can use the TabStrip's activate event.

Regards,
Dimo
the Telerik team

[Shane P]

Thanks Dimo

[Jason]

Here is my code of 2 Kendo Grids in a Kendo TabStrip can you give me an example of how to implement one of the two solutions you suggested below please.

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Animation(false)
    .Items(tabstrip =>
    {
        tabstrip.Add().Text("Tab One")
            .Selected(true)
            .Content(@<text>@(Html.Kendo().Grid<com.folder.Something>()
                .Name("GridOne")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Something);
                    columns.Bound(p => p.Something);
                    columns.Bound(p => p.Something);
                })
                .HtmlAttributes(new { style = "height: 450px" })
                .Sortable()
                .Scrollable(scrolling => scrolling.Virtual(true))
                .Filterable()
                .Pageable(pagings => pagings.Input(true))
                .Pageable(pagings => pagings.Numeric(false))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("Action_one", "Controller"))
                ))</text>);


        tabstrip.Add().Text("Tab Two")
           .Content(@<text>@(Html.Kendo().Grid<com.folder.Something>() 
                .Name("GridTwo")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Something);
                    columns.Bound(p => p.Something);
                    columns.Bound(p => p.Something); 
                })
                .HtmlAttributes(new { style = "height: 450px" })
                .Sortable()
                .Scrollable(scrolling => scrolling.Virtual(true))
                .Filterable()
                .Pageable(pagings => pagings.Input(true))
                .Pageable(pagings => pagings.Numeric(false))
                .DataSource(dataSource => dataSource
                    .Ajax()
                   .Read(read => read.Action("Action_two", "Controller")) 

                ))</text>);
    })
)

[Greg Lynne]

I realize this has been answered but I just had the same issue and resolved it a different way. Although I am using the MVC  wrapper this answer may help someone else.

What you may need to do so the grid sits inside the tabstrip correctly is create an outer div on the grid with a set height and make sure the height of the grid is  set to a slightly lesser value

.fields-tabstrip { height: 550px; }

 <div class="fields-tabstrip">
         @Html.Partial("TemplateFieldsGrid") //this creates the grid with a height of   480px
</div>

This worked for me