RadPane with Splitter - have left and bottom - Can't figure out how to add right pane

[Cindie Tenneson]

I followed your example and added the bottom and left panes with splitter so I could resize my chart but I can't figure out how to add the right pane and splitter.  Could you please help me?

Here is my layout:

 <telerik:RadSplitter ID="trsVertical" runat="server" Orientation="Vertical" >
        <telerik:RadPane ID="LeftPane" runat="server" Width="20px" Scrolling="none" BackColor="#f0f8ff">
        </telerik:RadPane>
        <telerik:RadSplitBar ID="trsVerticalEnd" runat="server" ></telerik:RadSplitBar>
        <telerik:RadPane ID="trpMiddlePane" runat="server" Height="500px" Width="925px" BackColor="#f0f8ff">
            <telerik:RadSplitter ID="trsHorizontal" runat="server" Height="100%" Width="100%" Orientation="Horizontal">
                <telerik:RadPane ID="trpChartPane" runat="server" Height="100%" Width="100%" Scrolling="none" BackColor="#f0f8ff"
                    OnClientResized="ResizeChart">
                    <telerik:RadChart ID="trcRadChart" runat="server">
                        ~~my chart definition goes here~~
                    </telerik:RadChart>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="trsHorizontalEnd" runat="server" ></telerik:RadSplitBar>
                <telerik:RadPane ID="BottomPane" runat="server" Height="20px"  BackColor="#f0f8ff">
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>

Here is the Ajax code for the resizing:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

        <script type="text/javascript">
            function ResizeChart(sender, args)
            {
                var chart = $get("<%= trcRadChart.ClientID %>");
                var chartimg = chart.getElementsByTagName("img")[0];
                chartimg.style.setAttribute("width", sender.get_width() + "px");
                chartimg.style.setAttribute("height", sender.get_height() + "px");
           }
        </script>

</telerik:RadScriptBlock>

[Svetlina Anati]

Hi Cindie,

I am afraid I could not completely understand what is teh exact problem you experience. If you want to add another, vertical RadPane on the right in teh same manner as the left pane in order to get a symetrical layout, you do not need to add another splitter - just add a new pane to the already declared vertical splitter as shown below:

    <telerik:RadSplitter ID="trsVertical" runat="server" Orientation="Vertical">
            <telerik:RadPane ID="LeftPane" runat="server" Width="20px" Scrolling="none" BackColor="#f0f8ff">
            </telerik:RadPane>
            <telerik:RadSplitBar ID="trsVerticalEnd" runat="server"></telerik:RadSplitBar>
            <telerik:RadPane ID="trpMiddlePane" runat="server" Height="500px" Width="925px" BackColor="#f0f8ff">
                <telerik:RadSplitter ID="trsHorizontal" runat="server" Height="100%" Width="100%"
                    Orientation="Horizontal">
                    <telerik:RadPane ID="trpChartPane" runat="server" Height="100%" Width="100%" Scrolling="none"
                        BackColor="#f0f8ff" aOnClientResized="ResizeChart">
                        ~~my chart definition goes here~~
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="trsHorizontalEnd" runat="server"></telerik:RadSplitBar>
                    <telerik:RadPane ID="BottomPane" runat="server" Height="20px" BackColor="#f0f8ff">
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server"></telerik:RadSplitBar>
            <telerik:RadPane ID="RightPane" runat="server" Width="20px" Scrolling="none" BackColor="#f0f8ff">
            </telerik:RadPane>
        </telerik:RadSplitter>

If this is not what you need, please open a new support ticket and send us a sample, fully runnable reproduction demo (in case you do not have problems with the chart it is not needed) along with detailed explanations of the actual and teh desired behavior and some screenshots with the problem and the desired result clearly marked. It will be also nice to provide a link to teh example you said you followed.

Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Cindie Tenneson]

This is exactly the help I needed.  Thank you!  This is the example I followed:  http://www.telerik.com/community/code-library/aspnet-ajax/chart/resize-chart-image-in-radsplitter.aspx  and your code helped em to complete it.

[Svetlina Anati]

Hi Cindie,

I am glad I was able to help you achieve the desired result. I also can make the following recommendations in order to improve the current layout:

1. Set the nested splitter' s VisibleDuringInit property to false - this will remove the initial resize of the splitter. Do the same for any other splitters if they are configured in percentages.
2. When you have a RadSplitter directly nested in a RadPane, you should set the parent pane's Scrolling property to None - otherwise, in case a scrollbar is needed you will end up with two - once generated by the pane and one - ny the nested splitter.

I hope that my suggestions are helpful and in case you have any other questions or problems, do not hesitate to contact us again!

Kind regards,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.