This is a migrated thread and some comments may be shown as answers.

How to set external url for sliding panes?

3 Answers 53 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Mac P
Top achievements
Rank 1
Mac P asked on 21 Jul 2010, 05:01 AM
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>

 

3 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 23 Jul 2010, 03:26 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Aarsh
Top achievements
Rank 1
answered on 22 Aug 2012, 05:45 PM
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>
0
Aarsh
Top achievements
Rank 1
answered on 22 Aug 2012, 06:00 PM
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
Tags
Splitter
Asked by
Mac P
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Aarsh
Top achievements
Rank 1
Share this question
or