Flex Pivot content is not visible inside kendo tabstrip if the tab is inactive while flex pivot is created

I have kendo tabstrip with two tabs, where first tab is active and second tab contains pivot container.  With this setting, when I create flex pivot, it’s created but content (fm-ui-element fm-ui fm-ui-container)  is not visible, only toolbar and field selector is visible. 
Please refer this fiddle : http://jsfiddle.net/sohansoni/rd2frbsa/4/
Now do full screen, flex pivot content appears. 
 
Now change the html so that flex pivot container is on first tab. and remove it from second tab. i.e in below code from fiddle uncomment the line which is highlighted and remove the same line from second div. 
and run the fiddle, you will see flex is created and even content tab is visible.
 
This used to work in 2.3, i.e. even if the flex is on non active tab of kendo tabstrip, it used to render. Can you please assist what am I missing ?
 

  <div>
<!-- <div id="pivot-container"></div> --> <!-- uncomment this line -->
span class="rainy">&nbsp;</span>
<div class="weather">
<h2>17<span>&ordm;C</span></h2>
<p>Rainy weather in Paris.</p>
</div>
</div>
<div>
<div id="pivot-container"></div> <!-- comment this line -->
</div>

10 answers

Public
Tanya Gryshko Flexmonster November 29, 2017

Hello, Sohan,
Thank you for reporting the issue. Your detailed description and example really helped us to reproduce the issue on our side. It will be fixed in minor release 2.410, ETA December the 18th.
Does it work for you?
Regards,
Tanya

Public
Sohan December 4, 2017

yes please

Public
Dmytro Zvazhii Flexmonster December 6, 2017

Hello Sohan,
We have prepared a workaround for you using the current version of Flexmonster – http://jsfiddle.net/flexmonster/rd2frbsa/10/.
Please let us know if it works for you.
Regards,
Dmytro.

Public
Dmytro Zvazhii Flexmonster December 14, 2017

Hello Sohan,
Hope you are doing well. Could you please confirm that the suggested workaround fits your needs?
Waiting to hear from you.
Regards,
Dmytro.

Public
Sohan December 15, 2017

Hello Dmytro, I will check this next week and will update you.

Public
Ian Sadovy Flexmonster December 26, 2017

Hello Sohan,
 
Could you please let us know if you have any updates on the above?
 
Regards,
Ian

Public
Sohan January 3, 2018

Hi Ian,
 
Apologies for the delay.
 
Unfortunately above solution will not work for us as we don’t know when will the element becomes visible in our case.  I have kendo tab strip under kendo tab strip and multiple flex pivot grids in them. 
So basically I am not able to get the isVisible event on pivot container so that I can call refresh on it? Please suggest
 
 

Public
Tanya Gryshko Flexmonster January 3, 2018

Hello, Sohan,
Please have a look at the modified sample: http://jsfiddle.net/flexmonster/rd2frbsa/11/. Now it has 3 tabs, the second and the third contain different pivots. When the Kendo TabStrip tab is opened, 'show' event is fired by Kendo. We use this event to refresh the necessary instance of the pivot (please pay attention to lines 4-7 of JavaScript code). You can refresh any instance of pivot the same way. For more information about Kendo TabStrip events please refer to their docs: https://demos.telerik.com/kendo-ui/tabstrip/events.
Let me know if the suggested approach works for you.
Regards,
Tanya

Public
Sohan January 4, 2018

Tanya,
Thanks for the example. But in my case the tabstrip’s are created dynamically under every tab strip and I have no control on how many pivots will be created and don’t have their id’s as they are also dynamic.
I can have show event for every tabstrip, but then how to get the instance of flex inside it ? I tried with $(“#pivotContainer”).data(“flexmonster”) but its not working. Can you please suggest ?

Also, this used to work in 2.3.x version, so long term solution should be that flex should take care of this on its own as it used in 2.3.x version, Otherwise we need to use refresh everywhere in the code, instead of this flex can have its own show event on which it can refresh on its own ? what do you think? 

Public
Tanya Gryshko Flexmonster January 5, 2018

Hello, Sohan,
Thank you for sharing with us additional details of your use case.
We recommend using $("#pivotContainer").data("flexmonster"). To make this work, please replace new Flexmonster() with $.flexmonster() when embedding the component. Provided you already included jQuery to use with Kendo TabStrip, using $.flexmonster() will work just the same as new Flexmonster(). Here is the updated sample demonstrating such approach: http://jsfiddle.net/flexmonster/rd2frbsa/13/. I hope you would find it useful.
In the long-term perspective, we do agree that 2.3.x-like behavior looks more logical. We will add the research task to our backlog and inform you when we have updates.
Regards,
Tanya

Please login or Register to Submit Answer