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 id="pivot-container"></div> --> <!-- uncomment this line -->
span class="rainy"> </span>
<p>Rainy weather in Paris.</p>
<div id="pivot-container"></div> <!-- comment this line -->
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?
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.
Hope you are doing well. Could you please confirm that the suggested workaround fits your needs?
Waiting to hear from you.
Hello Dmytro, I will check this next week and will update you.
Could you please let us know if you have any updates on the above?
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
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,
Let me know if the suggested approach works for you.
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?
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.