how to auto-dock sliding panes?

[jtby]

I would like my sliding panes to auto-dock when opened.  I have the code below fire when the pane opens, but the still the pane is not docked after the code executes:

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');

[jtby]

I am close, but can't quite get there.  This mostly works:

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?

[Svetlina Anati]

Hello jtby,

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

[jtby]

That does exactly what I want.  However, it leads to a new problem.  When I put a RadUpload control in the sliding panel as shown below then does not display on the page.  However, if I remove:

 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>

[Svetlina Anati]

Hi,

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