Multipule Grids in Tabs, Layout error.

4 posts, 0 answers
  1. Lee
    Lee avatar
    53 posts
    Member since:
    Feb 2018

    Posted 30 Mar 2018 Link to this post

    Hi,

    I'm using Bootstraps Tab component with two Tabs: Overview and Under 10K. There is 1 Grid on each Tab. Both load correctly but the one on the non-visible Tab doesn't get rendered correctly, attached a screenshot.

    When i resize the view or open debugging tools it then displays correctly, so is there a way i can trigger "re-draw" or "re-size" event?

    Thanks,
    Lee.

  2. Lee
    Lee avatar
    53 posts
    Member since:
    Feb 2018

    Posted 31 Mar 2018 in reply to Lee Link to this post

    I also get this when having multiple PivotGrids too:

    Example:

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#overview">Overview</a></li>
        <li><a data-toggle="tab" href="#viewTechServices">Tech Services</a></li>
    </ul>
     
    <div class="tab-content">
        <div id="overview" class="tab-pane fade in active">
            <div>
                <button id="exportOverview" class="k-button k-button-icontext hidden-on-narrow mb-20"><span class="k-icon k-i-excel"></span>Export to Excel</button>
            </div>
     
                @(
        Html.Kendo().PivotGrid<UserUtilisationView>()
            .Name("Overview")
            [..]
            )
            </div>
     
        <div id="viewTechServices" class="tab-pane fade">
            <div>
                <button id="exportTechServices" class="k-button k-button-icontext hidden-on-narrow mb-20"><span class="k-icon k-i-excel"></span>Export to Excel</button>
            </div>
            @(
                Html.Kendo().PivotGrid<UserUtilisationView>()
                    .Name("TechServices")
                    [..]
            )
        </div>
    </div>

     

     

     

     

     

     

     

  3. Lee
    Lee avatar
    53 posts
    Member since:
    Feb 2018

    Posted 31 Mar 2018 Link to this post

    I manged to solve this for the PivotGrid, same should work for the Grid to:

    <script>
        $(function () {
            $('.nav-tabs a').on('shown.bs.tab', function (event)
            {
                var tabId = $(event.target).attr("href");
                var tabDiv = $("div" + tabId);
                var pivotGrid = $(tabDiv).find("[data-role='pivotgrid']");
     
                $(pivotGrid).data("kendoPivotGrid").resize();
            });
        });
    </script>

     

    You can close this topic, thanks.

    Lee.

     

  4. Preslav
    Admin
    Preslav avatar
    579 posts

    Posted 03 Apr 2018 Link to this post

    Hi Lee,

    Thank you for sharing the solution with the community. 

    Generally speaking, the described is a known limitation of the Grid when initialized in a hidden container. A workaround very similar to the one outlined in your last post is available in the following how-to article:

    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top