Chris Trina
Top achievements
Rank 1
Rank 1
Chris Trina
asked on 17 Feb 2010, 12:51 AM
Is there an example of the best practices for integrating the splitter control and dock controls on the same page? Picture a portal style page where the splitter can basically resize the docking zones and the content, contained in docks resizes based on the zone it is dropped into.
Seems like a common use case, but I cannot find an existing example.
Thx
Chris
Seems like a common use case, but I cannot find an existing example.
Thx
Chris
2 Answers, 1 is accepted
0
Accepted
Hi Chris,
This can be easily achieved by placing a DockZone into a RadPane and setting its width in percent values. The zone will automatically resize when the Panes are (Splitter is) resized. Here is a simple project demonstrating this:
Greetings,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
This can be easily achieved by placing a DockZone into a RadPane and setting its width in percent values. The zone will automatically resize when the Panes are (Splitter is) resized. Here is a simple project demonstrating this:
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="700" Width="100%"> <telerik:RadPane ID="navigationPane" runat="server" Width="150"> <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="95%"> <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title"> <ContentTemplate> <br /> <br /> <br /> <br /> <br /> CONTENT <br /> <br /> <br /> <br /> <br /> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadPane> <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" /> <telerik:RadPane ID="contentPane" runat="server"> <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="300px" Width="95%"> <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title"> <ContentTemplate> <br /> <br /> <br /> <br /> <br /> CONTENT <br /> <br /> <br /> <br /> <br /> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadPane> </telerik:RadSplitter> </telerik:RadDockLayout> </div> </form></body></html>Greetings,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Chris Trina
Top achievements
Rank 1
Rank 1
answered on 19 Feb 2010, 03:43 PM
Thank you very much that was very helpful!