How to set external url for sliding panes?

[Mac P]

Hello,
My requirement is to build two panes. Left should be collapsed and have two sliding panes for preview buttons. Right pane should load usercontrol and should be expanded to 100%. The problem is that sliding pane doesnt have method set_contenturl(). so i cannot load external urls for each sliding pane. If i load the url in parent pane than the sliding pane gets overwritten and invisible. Somehow i cannot get right pane to expand upto 100%.

<

 

 

telerik:RadSplitter ID="RadSplitter1" Runat="server" Height="100%"

 

 

 

PanesBorderSize="3" Skin="Sunset" SplitBarsSize="8px" Width="100%">

 

 

 

<telerik:RadPane ID="RadPane1" Runat="server">

 

 

 

<telerik:RadSlidingZone ID="RadSlidingZone1" Runat="server">

 

 

 

<telerik:RadSlidingPane ID="RadSlidingPane1" Runat="server" Title="Load Yahoo" TabView="TextAndImage" OnClientExpanding="OnYahooExpanding" EnableDock="true"

 

 

 

CollapseText="Yahoo">

 

 

 

</telerik:RadSlidingPane>

 

 

 

<telerik:RadSlidingPane ID="RadSlidingPane2" Runat="server" Title="Load Google" TabView="TextAndImage" OnClientExpanding="OnGoogleExpanding" EnableDock="true"

 

 

 

CollapseText="Google">

 

 

 

</telerik:RadSlidingPane>

 

 

 

</telerik:RadSlidingZone>

 

 

 

</telerik:RadPane>

 

 

 

<telerik:RadSplitBar ID="RadSplitBar1" runat="server">

 

 

 

</telerik:RadSplitBar>

 

 

 

<telerik:RadPane ID="RadPane2" runat="server">

 

 

 

<uc1:WebUserControl ID="WebUserControl1" runat="server" />

 

 

 

</telerik:RadPane>

 

 

 

</telerik:RadSplitter>

Here is javascript code

 

<

 

 

telerik:RadScriptBlock ID="scriptBlock" runat="server">

 

 

 

 

 

 

 

<script type="text/javascript">

 

 

 

 

 

 

 

function OnYahooExpanding(sender, args) {

 

viewYahoo();

}

 

 

function OnGoogleExpanding(sender, args) {

 

viewGoogle();

}

 

 

function viewYahoo() {

 

 

 

var splitter = $find("<%=RadSplitter1.ClientID %>");

 

 

 

var pane = splitter.getPaneById("<%=RadPane1.ClientID %>");

 

 

 

if (!pane) return;

 

pane.set_contentUrl(

 

'http://www.yahoo.com');

 

pane.expand();

}

 

 

function viewGoogle() {

 

 

 

var splitter = $find("<%=RadSplitter1.ClientID %>");

 

 

 

var pane = splitter.getPaneById("<%=RadPane1.ClientID %>");

 

 

 

if (!pane) return;

 

pane.set_contentUrl(

 

'http://www.google.com');

 

pane.expand();

}

 

 

</script>

 

[Svetlina Anati]

Hello Mac P,

The RadSlidingPane does not provide a property which you can directly set to an external page. However, you can easily achieve what you need by putting a standard IFRAME element with 100% size in the sliding pane and setting the src to the desired external page.

Kind regards,
Svetlina
the Telerik team

[Aarsh]

I am wondering how can I access / set src attribute from C# code behind ?

<script type="text/javascript">
    //Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Telerik">
</telerik:RadSkinManager>
<asp:UpdatePanel ID="SlidingPaneUpdatePanel" runat="server">
    <ContentTemplate>
        <telerik:RadSplitter ID="Splitter1" runat="server" Width="37%" Height="100%">
            <telerik:RadPane ID="RightPane" runat="server" Width="481px" Height="300px" Scrolling="Y">
                <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="100%" SlideDirection="Right">
                    <telerik:RadSlidingPane ID="telerikPane" runat="server" Title="I can slide" Width="482px">
                        <telerik:RadCodeBlock ID="CodeBlock" runat="server">
                            <iframe id="iFrame" runat="server" src="Default.aspx" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
                            <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
                            </telerik:RadDatePicker>
                        </telerik:RadCodeBlock>
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </ContentTemplate>
</asp:UpdatePanel>

[Aarsh]

Try and Err got me the answer so posting the solution for others to refer :-)

iFrame.Attributes["src"] = "http://www.telerik.com";

As an alternative [I've not tried following as the above worked fine for me... ;-)

If you need to do something like getElementByID thing in the code behind, we can use

Control iframe = FindControl("iFrame");
if (iframe != null)
{
       //some code here
}

Thanks,
-Aarsh