Multipule Grids in Tabs, Layout error.

[Lee]

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.

[Lee]

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>

 

 

 

 

 

 

 

[Lee]

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.

 

[Preslav]

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:

• https://docs.telerik.com/kendo-ui/controls/navigation/tabstrip/how-to/initiliaze-grid-in-tabstrip

Regards,
Preslav
Progress Telerik