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

Multipule PivotGrids (8) Not Loading Correctly

6 Answers 17 Views
PivotGrid
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Veteran
Lee asked on 02 Apr 2018, 01:51 AM

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"

6 Answers, 1 is accepted

Sort by
0
Lee
Top achievements
Rank 1
Veteran
answered on 03 Apr 2018, 07:41 AM

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 :)

0
Preslav
Telerik team
answered on 03 Apr 2018, 12:33 PM
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:
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
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.
0
Lee
Top achievements
Rank 1
Veteran
answered on 04 Apr 2018, 06:17 AM
Thanks, that's strangle maybe because i'm using Bootstraps Tabs not yours?
0
Preslav
Telerik team
answered on 05 Apr 2018, 02:54 PM
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:
Did the CSS from my last reply work?


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.
0
Lee
Top achievements
Rank 1
Veteran
answered on 07 Apr 2018, 12:10 AM

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;
}
0
Preslav
Telerik team
answered on 10 Apr 2018, 02:59 PM
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
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
PivotGrid
Asked by
Lee
Top achievements
Rank 1
Veteran
Answers by
Lee
Top achievements
Rank 1
Veteran
Preslav
Telerik team
Share this question
or