function OnClientExpandedHandler(sender, args)
{
var splitter = $find("RadSplitter1");
var pane = splitter.GetPaneById("RadPane1");
var slidingZone = $find("SlidingZone1");
var paneID = slidingZone.GetPaneById("RadSlidingPane1");
slidingZone.DockPane(paneID); // dock the pane
alert('but yet it is not docked');
4 Answers, 1 is accepted
function
OnClientExpandedHandler (sender, eventArgs)
{
var slidingZone = $find("SlidingZone1");
var paneId = "RadSlidingPane1";
slidingZone.DockPane(paneId);
return false;
}
... but with a problem - I have 4 tabs on the left side of a slide zone. Click a tab and out slides the pane, and it auto-docks thanks to the code above. But now if I click another tab, nothing happens - I instead have to first close the the pane by clicking the icon on the upper left of the pane, then go and click on the tab I want. Not to smooth for the user.
Alternativley, I can set EnabledDock property on the slide panes to false, and now it also works pretty nice. Click a tab and the pane slides out, click a different tab and a different pane slides out - but the problem with doing it like this is that then moving the mouse over a different part of the layout causes the undocked slide pane to close on its own, which is not what I want. I really want a pane to just stay open till the user clicks a different tab.
I see I can do some things in onbeforeclientcollapse, such as cancel the collapse wth args.set_cancel(true), and the unwanted automatic collapsing goes away, but also I can no longer click a different tab to open a different slide panel.
Do you think there is a way to make a slidepane stay open on its own until you click a different tab?
You should use the OnClientBeforeExpand property and after docking the pane, you should cancel the expansion. Otherwise the RadSplitter "thinks" that the pane is expanded instead of docked which I suppose is your case. The above mentioned function should look like the following one:
function beforeExpand(sender,eventArgs) |
{ |
var slidingZone = $find("<%= RadSlidingZone1.ClientID %>"); |
slidingZone.dockPane(sender.get_id()); |
eventArgs.set_cancel(true); |
} |
<telerik:RadPane id="leftPane" runat="server" Width="198px" MaxWidth="300" EnableEmbeddedSkins="false" Skin="Telerik" > |
<telerik:RadSlidingZone ID="RadSlidingZone1" DockedPaneId="RadSlidePane1" runat="server" ClickToOpen="true" SlideDirection="Right" SlideDuration="1" > |
<telerik:RadSlidingPane Title="Office" ID="RadSlidePane1" EnableResize=false runat="server" OnClientBeforeExpand="beforeExpand" Scrolling="Y"> |
Office |
</telerik:RadSlidingPane> |
<telerik:RadSlidingPane Title="IT Manager" ID="RadSlidePane2" runat="server" OnClientBeforeExpand="beforeExpand"> |
IT Manager |
</telerik:RadSlidingPane> |
<telerik:RadSlidingPane Title="Monitor" ID="RadSlidePane3" runat="server" OnClientBeforeExpand="beforeExpand"> |
Monitor |
</telerik:RadSlidingPane> |
</telerik:RadSlidingZone> |
</telerik:RadPane> |
Best wishes,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
OnClientBeforeExpand="beforeExpand"
then it the upload control does appear on the page. I only want the select box and button, and none of the other buttons associated with the upload control, but also I notice if I remove
ControlObjectsVisibility=None
then the upload control does display on the sliding panel when I am using OnClientBeforeExpand="beforeExpand". Here is a code fragment:
<telerik:RadSlidingPane ID="RadSlidingPane"
EnableResize=true
Width=300
OnClientBeforeExpand="beforeExpand"
BorderStyle ="none"
runat="server">
<telerik:RadUpload ID="RadUpload1"
ControlObjectsVisibility=None
Skin="Black"
runat="server" />
</telerik:RadSlidingPane>
We tested the described setup and we found out that this problem is due to RadUpload's relative positioning. Therefore we suggest to apply the following style to the particular RadSlidingPane:
CSS class in the <head> section:
.ApplyPosition |
{ |
position:relative; |
} |
RadSlidingPane's setting:
<telerik:RadSlidingPane Title="Office" ID="RadSlidePane1" runat="server" |
Width=300px CssClass="ApplyPosition"> |
<telerik:RadUpload ID="RadUpload1" ControlObjectsVisibility="None" runat="server" /> |
Please, note that you should have proper widths/heights to have the whole RadUpload visible.
Kind regards,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center