Server Side Sliding Pane Close

[Kyle Schiele]

Hello

Can someone suggest a server side approch to closing a docked and or expanded sliding pane?

Setting the expandid id or the docked id to a non existant panel did not work.

Kyle

[Tsvetie]

Hi Kyle Schiele,
You can just set the ExpandedPaneId and DockedPaneId properties of the RadSlidingZone to empty strings. For example:

protected void Button1_Click(object sender, EventArgs e)
{
    this.RadSlidingZone1.ExpandedPaneId = string.Empty;
    this.RadSlidingZone1.DockedPaneId = string.Empty;
}

<telerik:RadSplitter ID="RadSplitter1" runat="server">
    <telerik:RadPane ID="RadPane1" runat="server" Width="22px" Scrolling="None">
        <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server">
            <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Test">
                <asp:Button ID="Button1" runat="server" Text="Collapse sliding pane"
                    OnClick="Button1_Click" />
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadPane ID="RadPane2" runat="server">
    </telerik:RadPane>
</telerik:RadSplitter>

Best wishes,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Kyle Schiele]

The above approach when the sliding pane is docked does not release the space the sliding pane was occupying. Is this a bug?

[Sophy]

Hi Kyle Schiele,

Setting the DockedPaneId to an empty string will undock the pane but nothing will make it resize to the correct size as the panes preserve their width and height after a postback. It depends on your exact scenario how you will implement this behavior. I could suggest you two options - dock/undock the slidingpane registering script which docks/undocks the pane client-side using the splitter's client-side API or set the Width property of the splitter's panes after undocking the pane server-side with DockedPaneId set to an empty string, e.g.:

protected void Button1_Click(object sender, EventArgs e)
{
    this.RadSlidingZone1.ExpandedPaneId = string.Empty;
    this.RadSlidingZone1.DockedPaneId = string.Empty;
    RadPane1.Width = Unit.Pixel(22);
    RadPane2.Width = Unit.Pixel(400);
}

Let us know if you need further assistance.

Kind regards,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[SDI]

Is there a way to do this client side?

I have a splitter with a slinding pane. in the pane is a radtreeview. when the user clicks the node it needs to collapse (undock) the radslidingzone that contains the treeview. (and grid you can see from code)

<telerik:RadSlidingPane ID="RadSlidingPaneGroups" runat="server" Width="230px" Title="Groups"
                        DockOnOpen="true" EnableDock="true" MinWidth="230" TabView="ImageOnly" IconUrl="~/RegisterPro/images/Menu/group.png">
                        <telerik:RadGrid ID="RadGridPrograms" runat="server" Width="225px" Height="200px" Visible="false">
                            <MasterTableView ClientDataKeyNames="ProgramId, Name" DataKeyNames="ProgramId, Name" AutoGenerateColumns="false">
                                <Columns>
                                    <telerik:GridBoundColumn Display="false" UniqueName="ProgramId" DataField="ProgramId" />
                                    <telerik:GridBoundColumn HeaderText="Program Name" UniqueName="Name" DataField="Name" />
                                </Columns>
                            </MasterTableView>
                            <ClientSettings EnablePostBackOnRowClick="true" Selecting-AllowRowSelect="true" />
                        </telerik:RadGrid>
                        <telerik:RadTreeView ID="RadTreeViewGroups" runat="server" Width="225px" Height="800px" OnClientNodeClicked="RadTreeViewGroups_OnClientNodeClicked">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Value="1" ExpandMode="ClientSide" Text="Master Level" />
                            </Nodes>
                        </telerik:RadTreeView>
                    </telerik:RadSlidingPane>

The OnClientNodeClicked="RadTreeViewGroups_OnClientNodeClicked" event fires of some js and i want the slidingpane to undock and collapse.

tried this and it didnt work and just "....collapse();

....
// collapse the pane
                var slidingZone = $find('<%= RadSlidingZone1.ClientID%>');
                var slidingPane = slidingZone.getPaneById('<%=RadSlidingPaneGroups%>');

                if (slidingPane) {
                    slidingPane.collapse = false;
                }

I didnt see anything in your documentation on this. is it possible in javascript?

Thanks!

[Vessy]

Hello,

To collapse/expand a SlidingPane you have to use its parent SlidingZone's collapsePane() and/or expandPane() method, passing the desired SlidingPane ID as its argument. You can find more detailed information on the SligingZone Client-Side API here: RadSlidingZone Client Object

I hope this helps.

Regards,
Veselina Raykova
Telerik

[SDI]

Got it thanks! I actually needed to undock not collapse it. So you sent me in the right direction.

// undock the pane
var mySlidingZone = $find('<%= RadSlidingZone1.ClientID%>');
mySlidingZone.undockPane('<%=RadSlidingPaneGroups.ClientID%>');

[Vessy]

Hi Brian,

I am glad my suggestion was helpful for you - feel free to contact us in case any further questions occur.

Regards,
Veselina Raykova
Telerik