Resizing Problem within RadDock

[Rahul]

Dear Telerik,

we are using RadSplitter, RadDockLayout , RadDock and RadChart in our application.

1. We need to set our custom width and height of raddock and radchart when we drop those from radsplitter to raddocklayout.
2. similarly when dropped from raddocklayout to radsplitter  the raddock and radchart within should to width and height of radsplitter.
3. if we resize raddock then radchart should resize automatically itself.

In ASPX side code :

  <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" BorderSize="0"
            BorderWidth="0" Skin="Black">
            <telerik:RadPane ID="RadPane1" runat="server" Width="350px" BorderSize="0" BorderWidth="0"
                Height="100%">
                <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" BorderSize="0" BorderWidth="0">
                    <telerik:RadSlidingPane ID="RadSlidingPane1" Title="RadSlidingPane1" runat="server"
                        BorderSize="0" BorderWidth="0" Width="300px">
                        <telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnLoadDockLayout="RadDockLayout11_LoadDockLayout"
                            StoreLayoutInViewState="false" EnableViewState="false">
                            <telerik:RadDockZone runat="server" ID="RadDockZoneVertical1" Orientation="Vertical"
                                FitDocks="true" RenderMode="Classic" BorderSize="0" BorderWidth="0" Width="270px"
                                MinHeight="270px">
                                <telerik:RadDock runat="server" ID="RadDock9" Text="Chart 1" EnableAnimation="true"
                                    DockMode="Default" EnableAjaxSkinRendering="true" EnableEmbeddedBaseStylesheet="true"
                                    RenderMode="Classic" Width="150px" EnableRoundedCorners="true" Resizable="true"
                                    DockHandle="Grip" Skin="Black" BorderSize="0" BorderWidth="0" AutoPostBack="true"
                                    UniqueName="raddoc1" CssClass="chartDock">
                                    <ContentTemplate>
  <telerik:RadChart ID="radChartJP" runat="server" IntelligentLabelsEnabled="True"
                                           Legend-Visible="true" ChartTitle-TextBlock-Text=""
                                            AutoLayout="false" Skin="Default">
                                        </telerik:RadChart>
                                        </div>
                                    </ContentTemplate>
                                </telerik:RadDock>
</telerik:RadDockZone>
                        </telerik:RadDockLayout>
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
        </telerik:RadSplitter>

Could you please advise how to achieve the same.

[Slav]

Hi Rahul,

First of all, I would suggest moving the RadDockLayout outside the RadSlidingPane if there are RadDocks that are not positioned in the RadSplitter. The purpose of the dock layout is to persist the state of all docks on the page so it is recommended to have only one that wraps all docks.

I am not quite sure what do you mean by moving the dock to the RadDockLayout. All docks should be inside the RadDockLayout if their state needs to be saved as mentioned above. Perhaps you are moving the dock from the RadDockZone in the splitter to a floating state.

Nevertheless, you can use the client-side events OnClientDragStart and OnClientDragEnd in order to change the size of the dragged dock according to its position. The width and height of the dock can be changed via its client-side API (functions set_width and set_height). The function get_dockZoneID can be used to determine the current position of the dock. The RadSlidingPane also has a client-side object that will help you retrieve its size (functions get_width and get_height) in order to set it to the dock when it is in the sliding pane.

You can use the approach in this Code Library article in order to resize the RadChart according to the the size of the dock.

All the best,
Slav
the Telerik team