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,
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,
3 Answers, 1 is accepted
0
Accepted
Hi ,
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
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.
0
Richard
Top achievements
Rank 1
Rank 1
answered on 29 Oct 2014, 07:39 PM
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
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
0
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
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.