Problem with iterating through tabs

[Klaus HParticipant]

Hello,

I am using the tab to display a reporting for the customer. The reporting consists of a static tab with text, a static tab with a grid and a variable number of tabs that contain a jqxChart each.

I add the charts for the charts dynamically in the javascript execution with the ‘addLast’ function and then create the chart and with the refreshEnd of the jqxChart I start adding the next tab and chart until all the charts are created. That works perfect. I do this and do not use initTabContent, because after loading the site, all charts should be ready and exportable to pdf without the user having to go through each tab first.

So I iterate through the tabs and generate the picture data to send to the server when I want to create the PDF document (the chart has to be visible in order to be able to generate the picture data). This also works with a limited number of charts. When there are so many charts that scrollable comes into play, it does not work anymore.

– addLast sets the added tab into focus
– select in a loop only works for the visible tabs and maybe one more
– select via the browser console to select a tab that is not visible in the header section works, but not in the script itself, so maybe this is a timing problem?

I modified one of your tab examples that shows the behaviour:
http://jsfiddle.net/ragu0mzg/

I start with 1 tab, I add 10 tabs dynamically. I iterate and select each tab via index in a loop and finally select a tab with the index 8. But after the execution of the script, “Tab 4” is selected (The first tab that is out of focus when you scroll to the left).

Could you please look into this.

Best Regards
Klaus

PS: As a contrast this works, selecting tabs 0 and 8 in a row without the loop:
http://jsfiddle.net/aqc81w65/

[HristoParticipant]

Hello Klaus,

We recommend using initTabContent callback when trying to initialize widget in the jqxTabs.
This is a strange case. The process of initialization of all tabs cause this case where it cannot select all tabs with simple iteration.
From what you write I think of one workaround where all items are selected sequentially but while this happens you could use jqxLoader before loading all items and when it is done show the jqxTabs.

Also, you could try this approach, please, take a look at this: http://jsfiddle.net/txhi/c6h7o6ma/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Klaus HParticipant]

Hello Hristo,

thank you for your feedback.

I have a function that tries to add a new a new tab and checks if there is corresponding data for it to do so or finish the execution. If there is data, it tries to add a new tab with a new function call. I had the first call of this in the callback of the load function of the website and further calls I triggered in the add event of the jqxTab – I have moved this to the initTabContent and it works 100% like before with the strange behaviour.

The main problem is I need to get the png data of the chart, for that it needs to be visible, but not all are visible if I use the select function and I cannot react to the refreshEnd event of the chart to get to the data because that seems to fire once it starts rendering, I would need it after it has finished rendering.

Do you think it might work if I do not create the additional tabs on the fly in JavaScript but if I create them on the server as HTML? But I have tried this on a fiddle and that did not seem to work either, even with ensureVisible:
http://jsfiddle.net/7g3sz64c/

I don’t understand why the tab is not shown/selected.

[Klaus HParticipant]

Hi,

I couldn’t solve the problem, but I found a workaround, I generate all the charts two times, one inside the tab and one outside the tab and if I need to generate the picture data for the chart, I use that from outside of the tab and make it invisible if I do not need it.

[HristoParticipant]

Hello Klaus,

The for loop is to fast to happen this selection to transform each one HTML element.
I tried similar scenario with ‘setInterval’ but I think this is not a satisfactory result.
It is a strange case but you could try some workaround.
I would like to suggest you set these charts separate of the Tabs and their containers are with visibility: hidden.

Also, there is another approach to select and return to old tab and at this moment to export already created Chart (but without animation of the Chart).
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Klaus HParticipant]

Hello Hristo,

as written before your last post, I am using the approach to generate the chart two times, once inside the tab, once inside a container, I access the picture data from the container and make that invisible after I have retrieved the necessary data (or maybe in the future I delete the container). Technically it works, the first user feedback is good, browser performance does not seem to be an issue as of now.

I don’t see any way to achieve a good solution for this case with the api right now. There would have to be an event that is triggered after the chart has finished rendering in order to save the data and create the next tab with the next chart. But as you said it is a strange case and not a common case.

Thanks for all the help.

Regards
Klaus

[Author]

Posts