Cannot resize radchart in raddock on PageLoad

Thread is closed for posting
3 posts, 0 answers
  1. aykut
    aykut avatar
    64 posts
    Member since:
    Oct 2007

    Posted 31 Aug 2011 Link to this post

    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. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 06 Sep 2011 Link to this post

    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

    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 >>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. aykut
    aykut avatar
    64 posts
    Member since:
    Oct 2007

    Posted 06 Sep 2011 Link to this post

    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.
Back to Top