Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Can’t draw additional pivot inside Bootstrap modal

Jaime McDermott asked on August 25, 2017

I saw in an example elsewhere in the forum that you could create a custom drill through by creating a new pivot inside a Jquery UI modal. I updated that code to 2.4, and it still works here: https://jsfiddle.net/1rm53nt9/9/
 
However my website uses Bootstrap (3.3.7), so we’d prefer to use modals from it to have a consistent style, plus including JQuery UI seems to create conflicts with Bootstrap. Unfortunately, when I use a Bootstrap modal instead of the JQuery UI modal, the Pivot is always rendered as a mostly blank box with a partial toolbar and the configuratorButton. If I update the fields via the configurator or resize the window at all, it will draw the component properly. Additionally, if I wait long enough, and call refresh(), it will also draw the pivot properly. I’ve tried using timers and event handlers on ‘reportcomplete’ to call refresh() at the right time, but I can’t get it to work consistently.
 
Here’s a fiddle that demonstrates this using very similar configuration to the working JQuery UI demo: https://jsfiddle.net/vgoLLf95/
And here’s one that is a little closer to our configuration: https://jsfiddle.net/vgoLLf95/2/
 
You can see in that second fiddle that adding a refresh 1 second after creating or updating the pivot works in sometimes, but does not work consistently.
 
Do you know why it isn’t drawing initially, and if so, is it a bug?
Maybe more importantly, can you think of a way to get around the problem in the short term without using a really long timer?

2 answers

Public
Jaime McDermott August 25, 2017

After hours of tweaking, I tried removing the modal animation on a whim and it seems to have completely fixed the problem. https://getbootstrap.com/docs/3.3/javascript/#modals-remove-animation
Here’s an updated fiddle with the fade class removed: https://jsfiddle.net/vgoLLf95/3/
It would be better looking if the animation could be enabled, so if you have time to look into that, great!
Otherwise, we are unblocked and it’s not a huge issue to not have animations for the custom drill-through.

Public
Tanya Gryshko Flexmonster August 25, 2017

Hello Jaime,
We are very glad everything works OK. Thank you for providing us with an updated fiddle. We will have a look at it. If we find a way to enable the animation, we will inform you. Let us know in case of further questions.
Regards,
Tanya

Please login or Register to Submit Answer