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

5 posts, 1 answers
  1. Shane P
    Shane P avatar
    86 posts
    Member since:
    Sep 2012

    Posted 30 Jan 2012 Link to this post

    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
  2.
  3. Answer
    Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 31 Jan 2012 Link to this post

    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!
  5. Shane P
    Shane P avatar
    86 posts
    Member since:
    Sep 2012

    Posted 31 Jan 2012 Link to this post

    Thanks Dimo
  7. Jason
    Jason avatar
    2 posts
    Member since:
    Aug 2012

    Posted 28 Aug 2012 Link to this post

    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>);
        })
    )
  8.
  9. Greg Lynne
    Greg Lynne avatar
    31 posts
    Member since:
    Mar 2010

    Posted 07 Aug 2013 Link to this post

    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

Back to Top