I am creating a user control ascx with the following. Facing the following 2 issues:
- When the mouse moves over the SlidingPane, it expands but doesn't render properly until the "Dock" button is clicked. After that, it renders properly.
- More importantly, when the "Dock" button is clicked, it doesn't dock. Instead closes down.
Can you please help. Thanks.
<
telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="0px"
Skin="Web20">
<telerik:RadPane ID="BottomPane" runat="server" Width="100%" Scrolling="None">
<telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="100%" SlideDirection="Top">
<telerik:RadSlidingPane ID="RadSlidingPane1" Title="Parameters" runat="server" Width="100%">
<telerik:RadGrid ID="ParameterRadGrid" runat="server" Skin="Web20" AutoGenerateColumns="false">
<MasterTableView CellSpacing="0" CellPadding="0" TableLayout="Fixed" Width="100%" ShowHeader="false">
<Columns>
<telerik:GridTemplateColumn ReadOnly="true" Reorderable="true" Resizable="true">
<ItemStyle HorizontalAlign="Left" Width="20%" />
<ItemTemplate>
<span><%# Eval("Name")%></span>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn ReadOnly="true" Reorderable="true" Resizable="true" >
<ItemStyle HorizontalAlign="Left" Width="80%" />
<ItemTemplate>
<span><%# Eval("Value")%></span>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadSlidingPane>
</telerik:RadSlidingZone>
</telerik:RadPane>
</
telerik:RadSplitter>
1 Answer, 1 is accepted
Hi Sanket,
First of all, let me explain how the dock functionality of the RadSlidingPane works. The RadSlidingPane is a child of a RadSlidingZone, which in turn is a child of a RadPane. When the RadSlidingPane slides out, it should show over any content of an adjacent RadPane. Because of this, it does not act as a child of its parent RadPane. However, when you try to dock a RadSlidingPane, you force it into its parent RadPane. At this point, in order for the RadSlidingPane to show all its content (without its parent RadPane to show scrollbars because of its Height=22px), the RadSlidingPane tries to resize its parent RadPane and in case it fails, it collapses. However, in order to be able to resize a RadPane, you have to define at least two RadPanes in the RadSplitter. That way, when you resize the top pane to a larger height, the bottom pane will resize to a smaller height, leading to the RadSplitter keeping its correct Height.
Having said that, in order to use the dock functionality of the RadSplidingPane, you have to define at least two RadPanes in your RadSplitter.
For example:
| <head runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| html, body, form |
| { |
| height:100%; |
| margin:0px; |
| padding:0px; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadSplitter Skin="Sunset" ID="RadSplitterTop" Orientation="Horizontal" Width="100%" |
| Height="100%" runat="server"> |
| <telerik:RadPane ID="MainPane1" runat="server" Locked="true" Scrolling="None" Width="100%" |
| Height="22"> |
| <telerik:RadSlidingZone ID="Radslidingzone2" runat="server" Height="22" SlideDirection="Bottom"> |
| <telerik:RadSlidingPane EnableDock="true" Title="Pane" ID="Radslidingpane4" runat="server" |
| Width="150"> |
| </telerik:RadSlidingPane> |
| </telerik:RadSlidingZone> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="Radsplitbar3" runat="server"></telerik:RadSplitBar> |
| <telerik:RadPane ID="ContentPane" runat="server"></telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
Sincerely yours,
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.