Sliding Zone Width

[Robin]

Hi,

I would like the RadSlidingZone of my project to be invisible when a certain SlidingPane ist expanded (and regain it's visibility when that SlidingPane collapses). I've tried the following code, but it doesn't seem to work:

function OnClientDock(sender, eventArgs)
{
                var slidingZone = $find("<%=RadSlidingZone1.ClientID %>");
                slidingZone.Width = "0px"; ;
}

function OnClientUndock(sender, eventArgs)
 {
                var slidingZone = $find("<%=RadSlidingZone1.ClientID %>");
                slidingZone.Width = "22px";
}

<telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" DockedPaneID="RadSlidingPane1" >

            <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server"  Title="SlidingPane"
                    EnableResize="False" OnClientBeforeDock="OnClientDock" OnClientBeforeUndock="OnClientUndock">

             [...]

             </telerik:RadSlidingPane>

</telerik:RadSlidingZone>

Any suggestions on how to fix this would be of great help.
Thanks in advance,
Robin

[Vessy]

Hi Robin,

I review the code bellow and noticed that you are trying to set values to a "Width" property. Thus this property is not a part from the standard SlidingZone's functionality, its value is being applied correctly but the SlidingZone never uses is.

In order to achieve the desired scenario you could use the following approach:

<script type="text/javascript">
    function OnClientDock(sender, eventArgs) {
        var tabContainer = sender.getTabContainer();
        $telerik.$(tabContainer).parent().css('display', 'none');
    }

    function OnClientUndock(sender, eventArgs) {
        var tabContainer = sender.getTabContainer();
        $telerik.$(tabContainer).parent().css('display', '');
    }
</script>

All the best,
Veselina
the Telerik team