Hi,
I have a tree control. In order to fill the data i have to query some external web services. Sometimes they take some time in fetching the data, i want to display some loader type of animation. I tried using the older ways of loading a gif file using Jquery show and hide methods. Somehow they are not display over the canvas diagram control.
Can you please advise?
Make sure the DIV that is supposed to appear over the diagram is a sibling of the diagram DIV, and set its CSS z-index to something large, like 300.
There’s an example of HTML elements appearing over a Diagram in this sample: http://gojs.net/latest/samples/dataVisualization.html
And in this sample: http://gojs.net/latest/samples/htmlInteraction.html
Both have their CSS z-index set as a matter of necessity (because we are setting the z-index of the Diagram DIV’s canvas to 2, so it must be greater than 2 to be shown.)
Hi,
thanks for your feedback. I did the changes, however i could get the css animation only when i am in debug mode in the browser. Otherwise the background of the DIAGRAM DIV is only taking priority. Please note that the z index value is also set as a greater value.
I am trying show some animation during the data fetch.
Also, since the animation begins before the diagram initialization, will that be a problem?
It shouldn’t be a problem that an HTML+CSS or Gif animation begins before the diagram initialization, as long as all the relevant parts are siblings of the Diagram DIV and have a high z-order. I’m not sure what else might be causing issues with the Diagram DIV taking priority, but if you want to make a simple example of it I could take a look.
https://gojs.net/latest/samples/virtualizedTreeLayout.html now shows an example of a CSS animation that is shown during loading.