asked on November 29, 2017
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"> </span>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
</div>
<div>
<div id="pivot-container"></div> <!-- comment this line -->
</div>
⋅ 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
⋅ December 4, 2017
yes please
⋅ 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.
⋅ 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.
⋅ December 15, 2017
Hello Dmytro, I will check this next week and will update you.
⋅ December 26, 2017
Hello Sohan,
Could you please let us know if you have any updates on the above?
Regards,
Ian
⋅ 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
⋅ 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
⋅ 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?
⋅ 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
