Determine when transition animations complete

2 posts, 0 answers
  1. Kenn
    Kenn avatar
    4 posts
    Member since:
    Oct 2006

    Posted 18 Jan 2018 Link to this post

    I'm using the transitions in order to animate my RadHtmlChart.  However, I'm also using the client side getSVGString() to facilitate allowing the user to download an image of the chart.  I convert the svg string to png on the server and push back to client.  All of this is working EXCEPT, occasionally the getSVGString() is called before the animation has completed.

    In order to work around the issue, I'm doing the following:
    function setSvgContent<%=Me.ClientID%>() {
                setTimeout(function () {
                    var chartRendering = $find("<%=radChart.ClientID%>");
                    if (chartRendering != null) {
                        $get("<%=svgHolder.ClientID%>").value = escape(chartRendering.getSVGString());
                }, 2000);

    I'm not fond of using a setTimeout and I'd prefer to call the getSVGString() after the animation has completed.

    Is there a way to determine when the RadHtmlChart animation has completed??


  2. Marin Bratanov
    Marin Bratanov avatar
    5359 posts

    Posted 19 Jan 2018 Link to this post

    Hi Kenn,

    You can disable animations by setting the Transitions property to false.

    An event for the animations is not available and thus a timeout is the only other options.

    If you need to render charts on the server I can also suggest you consider using tools like PhantomJS to spin up the browser on the server so you can get the rendering and the image there, as RadHtmlChart is not designed for this purpose. Its goal is to offload rendering to the client browser.


    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top