This is a migrated thread and some comments may be shown as answers.

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

4 Answers 1123 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Shane P
Top achievements
Rank 1
Shane P asked on 30 Jan 2012, 09:57 PM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 31 Jan 2012, 10:04 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shane P
Top achievements
Rank 1
answered on 01 Feb 2012, 03:31 AM
Thanks Dimo
0
Jason
Top achievements
Rank 1
answered on 28 Aug 2012, 09:14 PM
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>);
    })
)
0
Greg Lynne
Top achievements
Rank 1
answered on 07 Aug 2013, 09:13 PM
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

Tags
TabStrip
Asked by
Shane P
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Shane P
Top achievements
Rank 1
Jason
Top achievements
Rank 1
Greg Lynne
Top achievements
Rank 1
Share this question
or