How to re-size chart after containing panel is expanded.

4 posts, 1 answers
  1. Richard
    Richard avatar
    7 posts
    Member since:
    Jun 2013

    Posted 27 Oct 2014 Link to this post

    I have a Telerik RadHtmlChart inside an asp Panel which uses an ajaxtoolkit CollapsiblePanelExtender.

    If the panel is collapsed when I assign a datasource to the chart and databind, after the panel expands the chart only fills 1/2 the panel size, left to right. If I have the panel expanded and the chart visible during the databind, it fills the panel all the way across as expected.

    Somehow I need to know when the panel has expanded and tell the chart to resize/repaint and fill the available space in the panel, but so far no joy doing this.Or maybe there is a flag/property on my controls I've missed which would help the chart fill the available space even when the panel is expanded.

    I would prefer to work in the C# code behind, but javascript/jquery solutions are also appreciated.Thanks,
  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 29 Oct 2014 Link to this post

    Hi Richard,

    Generally the RadHtmlChart renders entirely on the client as SVG with JavaScript. If you want to execute a JavaScript from code behind you must register a startup script. See an example here.

    As for the chart's resizing you can find more details in this code library. In order to repaint the chart when CollapsiblePanel is expanded you must initially attach to the corresponding event (see an example here) and then simply call the chart's repaint() method.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Richard
    Richard avatar
    7 posts
    Member since:
    Jun 2013

    Posted 29 Oct 2014 in reply to Danail Vasilev Link to this post

    Thank you, that is very helpful.

    I am able to do a repaint when the panel expands, but now it still appears "collapsed" vertically when the initial loading of the chart happens.  If collapse, then expand again, it appears fully expanded as desired.

    If I collapse the panel, then re query and assign data to the chart, then expand the panel, the chart is extremely compacted in a small square on the left side.

    I suspect I may need to experiment with some different parent containers to achieve what I ultimately desire for this UI.

    Thanks again for your help,

    -Rick
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 03 Nov 2014 Link to this post

    Hi Rick,

    Can you paste the problematic code below that reproduces the issue, so that we can make an investigation locally?

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top