the below code resizes radchart when you resize dock. but when page first loads, radchart is bigger than dock itself and some of chart is not visible. can someone help please ?
the below code resizes radchart when you resize dock. but when page first loads, radchart is bigger than dock itself and some of chart is not visible. can anybody help me with a code sample ? I searched forums and tried every single chart resize example but could no succeed..
the below code resizes radchart when you resize dock. but when page first loads, radchart is bigger than dock itself and some of chart is not visible. can anybody help me with a code sample ? I searched forums and tried every single chart resize example but could no succeed..
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.rdContent
{
overflow: hidden !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function ResizeChart(sender, args) {
var chart = $get("<%= RadChart1.ClientID %>");
var chartimg = chart.getElementsByTagName("img")[0];
chartimg.style.setAttribute("width", sender.get_width() - 50 + "px");
chartimg.style.setAttribute("height", sender.get_height() - 50 + "px");
}
</script>
</telerik:RadScriptBlock>
<br />
<div>
<telerik:RadDockLayout runat="server" ID="RadDockLayout1" StoreLayoutInViewState="false">
<telerik:RadDockZone runat="server" ID="RadDockZone4" Width="372px" Style="float: left;
margin-right: 5px" BorderColor="#E1E1E1" BorderStyle="Solid">
<telerik:RadDock ID="RadDock4" runat="server" Resizable="true" Width="350px" EnableRoundedCorners="true"
OnClientResizeEnd="ResizeChart">
<ContentTemplate>
<div>
<telerik:RadChart ID="RadChart1" runat="server">
<Series>
<telerik:ChartSeries>
<Items>
<telerik:ChartSeriesItem YValue="3">
</telerik:ChartSeriesItem>
<telerik:ChartSeriesItem YValue="6">
</telerik:ChartSeriesItem>
<telerik:ChartSeriesItem YValue="2">
</telerik:ChartSeriesItem>
<telerik:ChartSeriesItem YValue="1">
</telerik:ChartSeriesItem>
<telerik:ChartSeriesItem YValue="5">
</telerik:ChartSeriesItem>
<telerik:ChartSeriesItem YValue="4">
</telerik:ChartSeriesItem>
</Items>
</telerik:ChartSeries>
</Series>
</telerik:RadChart>
</div>
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
<telerik:RadDockZone runat="server" ID="RadDockZone5" Width="372px" Style="float: left;
margin-right: 5px;" BorderColor="#E1E1E1" BorderStyle="Solid">
<telerik:RadDock ID="RadDock5" runat="server" Resizable="true" Width="327px" EnableRoundedCorners="true">
<ContentTemplate>
asdfads
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
<telerik:RadDockZone runat="server" ID="RadDockZone6" Width="372px" Style="float: left;"
BorderColor="#E1E1E1" BorderStyle="Solid">
<telerik:RadDock ID="RadDock6" runat="server" Resizable="true" Width="327px" EnableRoundedCorners="true">
<ContentTemplate>
asdf
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
</telerik:RadDockLayout>
</div>
</form>
</body>
</html>
2 Answers, 1 is accepted
0
Hello Aykut,
If you need to adjust the chart size on the client side (note, that this means that the browser will resize the image and it will not be re-rendered) you can check the implementation in this code library. It actually shows how this is done in RadSplitter, but the resizing itself would be the same and I can see you are already familiar with RadDock Client Side Events.
There is an alternative approach -- you can perform an ajax request, so that the image is re-rendered again on the server with the desired size. There is such example in the above mentioned code library. Finally, you can find an enhanced version attached to this forum post. The difference here is that the chart is resized immediately after initial load. Once again, you will need to apply this approach using the RadDock client side events.
Best regards,
Ves
the Telerik team
If you need to adjust the chart size on the client side (note, that this means that the browser will resize the image and it will not be re-rendered) you can check the implementation in this code library. It actually shows how this is done in RadSplitter, but the resizing itself would be the same and I can see you are already familiar with RadDock Client Side Events.
There is an alternative approach -- you can perform an ajax request, so that the image is re-rendered again on the server with the desired size. There is such example in the above mentioned code library. Finally, you can find an enhanced version attached to this forum post. The difference here is that the chart is resized immediately after initial load. Once again, you will need to apply this approach using the RadDock client side events.
Best regards,
Ves
the Telerik team
Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>
0
aykut
Top achievements
Rank 1
Rank 1
answered on 06 Sep 2011, 05:35 PM
thank you. I already checked the links you posted. I searched the whole telerik forums and found the solution. I did it right now.
thank you.
thank you.