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

Multipule Grids in Tabs, Layout error.

3 Answers 57 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Veteran
Lee asked on 30 Mar 2018, 08:58 PM

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.

3 Answers, 1 is accepted

Sort by
0
Lee
Top achievements
Rank 1
Veteran
answered on 31 Mar 2018, 08:28 AM

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>

 

 

 

 

 

 

 

0
Lee
Top achievements
Rank 1
Veteran
answered on 31 Mar 2018, 09:07 AM

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.

 

0
Preslav
Telerik team
answered on 03 Apr 2018, 11:06 AM
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.
Tags
Grid
Asked by
Lee
Top achievements
Rank 1
Veteran
Answers by
Lee
Top achievements
Rank 1
Veteran
Preslav
Telerik team
Share this question
or