Multipule PivotGrids (8) Not Loading Correctly

[Lee]

Hi,

I have 8 (bootstrap) Tabs along with 8 PivotGrids (all with different names/ids, endpoints).

While some of them load correctly some, load the data, but then apply "display:none;" to the columns and rows (see attached).

I don't get any console errors, so not sure why this is happening, other than it doesn't like have 8 on one page?

I tried looking at the RequestEnd callback to maybe remove the "display:none;:" from the tables, but the data that's passed doesn't contain which PivotGrid it's for.

So i'm stuck any recommendations apart form "don't have 8 on one page :P"

[Lee]

I've temporarily fixed it with a jquery hack

var numPivotGrids = 8;
var initPivotGrids = 0;
function onRequestEnd(e)
{
    //console.log(e);

    initPivotGrids++;
    if (initPivotGrids === numPivotGrids)
    {
        $("div[data-role='pivotgrid']").each(function ()
        {
            $("table", $(this)).each(function ()
            {
                if ($(this).css("display") === "none")
                    $(this).css("display", "");
            });
        });
    }
}

 

But an actual fix would be great :)

[Preslav]

Hi Lee,

I tested the scenario(8 PivotGrids in a TabStrip) and it seems they work as expected on my side. Please find my test Dojo here:

• https://dojo.telerik.com/ogowIyEj/2

I also check our data records, unfortunately, I was not able to find any similar cases. Having said that, I am not sure what might be causing the described faulty behavior.

What I could suggest is using the following CSS:

div.k-grid > table{
    display: table !important;
}

With the above CSS, the tables will be forced to be displayed.

I hope this helps.


Regards,
Preslav
Progress Telerik

[Lee]

Thanks, that's strangle maybe because i'm using Bootstraps Tabs not yours?

[Preslav]

Hello Lee,

I do not believe that the Bootstrap Tabs might be the cause of this faulty behavior. I tested the scenario and the PivotGrids look okay. Please check the modified Dojo:

• https://dojo.telerik.com/ogowIyEj/4

Did the CSS from my last reply work?


Regards,
Preslav
Progress Telerik

[Lee]

Hi Preslav,

It helped but not completely work. I ended up using:

div.k-grid > table,
div.k-grid-header-wrap table,
div.k-grid-content > table {
    display: table !important;
}

[Preslav]

Hello Lee,

I am glad to hear that my suggestion helped. Thank you for sharing the final CSS with the community.


Regards,
Preslav
Progress Telerik