Undocking a docked pane on postback

[R N]

I have a slider control that has some search controls in it. I would like to display the slider control when the page loads up the first time. I am doing so like this:

RadSlidingZone1.DockedPaneId = RadSlidingPane1.ClientID

And once they click on the search button, upon postback, I want to hide the slider control (undock basically). Is there any server side property that I can set to achieve this?

RadSlidingZone1.DockedPaneId = Nothing

I tried the above line, but the sliding zone takes up that area where the sliding pane is supposed to show with a blank space.

Also, how can I access the client-side JS functions?

I am trying to do the following. The splitter doesn't recognize these functions like get_dockedPaneId();

var splitter = document.getElementById("<%= RadSlidingZone1.ClientID %>");
alert(splitter.initiallyDockedPaneId);

var pane = splitter.get_dockedPaneId();
alert(pane)
if (pane)
{
pane.collapsePane();
}

Could you tell me what I could be missing? I have the RadControls folder within my application. Also, under RADCONTROLS\Splitter\Scripts\1_3_2, I have both RadSlidingZone.js and RadSplitter.js.

Please help!
Thanks!

[Sophy]

Hi,

I could not completely understand what is the problem you experience when you set the following 
RadSlidingZone1.DockedPaneId = Nothing
Please, describe in more details what is the result you observe.

Regarding the issue that the methods you use in the script you have sent us are not recognized by the RadSplitter is due to their names not being the same as those which the splitter provides. There are two versions of the RadSplitter - RadSplitter for ASP.NET - the classic version and RadSplitter for ASP.NET AJAX. We recommend using RadSplitter for ASP.NET AJAX as all future development and improvement will be directed to the ASP.NET AJAX version of the control.
Judging from your words you use RadSplitter for ASP.NET which needs RadControls folder while RadSplitter for ASP.NET AJAX does not need it as everything needed for the proper functioning in the control is included in the Telerik.Web.UI dll. However, it seems that you are trying to use methods valid for the ASP.NET AJAX version of the splitter.
Please, review the Client-Side API Reference section  from the documentation about RadSplitter for ASP.NET
and the Client-Side Programming section from the documentation about RadSplitter for ASP.NET AJAX. To make the provided script work you will need to modify it in the following way if you use the classic RadSplitter:

<script type="text/javascript">
   function undockPane()
   {
    var slidingZone = <%= slzone1.ClientID %>;

    var slidingPaneId = slidingZone.GetDockedPaneId();

    if (slidingPaneId)
    {
        slidingZone.UnDockPane(slidingPaneId);
    }
   }
</script>

I would also recommend you take a look at the Client-Side API online example about RadSplitter for ASP.NET which demonstrates how to work with much of the splitter's client-side API.
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.

[R N]

Thanks for your prompt reply.

RadSlidingZone1.DockedPaneId = Nothing
When I do the above, I am expecting the slider controls to slide back up (I have horizontal orientation) and hide. But what happens is, though the sliders do hide, the space below the slider control (not used by the controls) there is a huge blank space (where the slider is supposed to take that space). What I expect instead of the blank space is the rest of controls below the slider to take that place. I hope I was able to explain clearly this time.

I need your help in understanding the AJAX version that you recommend. I installed the "RadControls Q1 2008". And I get RadSplitter.Net2.dll with the installation which I am using in my project. Is this the AJAX version? Also, to use the AJAX version, do I need to have my web project setup in Visual Studio 2005 using "ASP.NET Ajax-Enabled web site" template or can it be just "ASP.NET web site" template?

Please advice.
Thanks!

[R N]

I have the following function that I execute when the page loads. My intent is to hide the pane that is displayed (which I want to hide without the user clicking on anything). My earlier posting was to try and see if I could do the same using server-side code, but was not successful.

<script type="text/javascript">  
undockPane();
function undockPane() {  
    var slidingZone = <%= RadSlidingZone1.ClientID %>;  
    var slidingPaneId = slidingZone.initiallyDockedPaneId
   
    if (slidingPaneId) {  
        slidingZone.UnDockPane(slidingPaneId);  
        slidingZone.CollapsePane(slidingPaneId);  
    }  
}
</script>

What am I missing?

Thanks!

[Sophy]

Hi,

Thank you for clarifying the issue. The problem you observe is due to setting the DockedPaneId to Nothing only. In this way the sliding pane will be undocked but nothing will make it resize to the correct size as the panes preserve their width and height after a postback. To achieve the desired scenario you can dock/undock the slidingpane registering script which docks/undocks the pane client-side in the way it is demonstrated in the Client-Side API online example or set the height property of the splitter's panes after undocking the pane server-side with DockedPaneId set to Nothing. For your convenience I have attached a sample page which demonstrates both of the above suggestions.

The RadSplitter.Net2.dll is the dll for RadSplitter for ASP.NET (the classic version). If you want to use the ASP.NET AJAX version of the splitter you should download the RadControls for ASP.NET AJAX suite. It provides the Telerik.Web.UI.dll which contains all Telerik's ASP.NET AJAX controls. To use RadSplitter for ASP.NET AJAX you need to add the Telerik.Web.UI.dll in the bin folder of your WebSite.
The RadControls for ASP.NET AJAX are created on the top of ASP.NET AJAX and for this reason a ScriptManager control is required on the page to registers the needed scripts as well as the Web.config file should contain the configuration settings for an Ajax-enabled website.
If you create an Ajax-Enabled WebSite the Web.config file will contain the needed configuration settings for an ASP.NET AJAX website and you will not need to add them manually. Otherwise, if you choose the ASP.NET web site option you will need to modify the Web.config file manually. You can take a look at the following link  which describes how the Web.config file should be configured when using ASP.NET AJAX.
I suggest you use this help article for reference.
If you have other questions, do contact us again.

Sincerely yours,
Sophy
the Telerik team

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

[R N]

Thanks for your help, Sophy! I was able to resolve the issue.
I am using the classic version and client-side JS to correct the issue.

The client-side JS function that I am calling was not registered using RegisterStartupScript. I was just calling it within the <script> block client-side. That didn't work as the function was getting called before the SlidingPane object model was fully loaded in the browser. Registering the function call like you have shown in the example project helped me resolve the issue.

Page.ClientScript.RegisterStartupScript(Me.[GetType](), "undockpane", "setTimeout(function (){dockUndockSlidingPane();},100);", True)

Thanks again for your excellent service in resolving my issue!