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

Show Iframe in RadDock on button click

2 Answers 164 Views

Dock

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

C O asked on 21 Apr 2010, 02:03 PM

I want the content of each page in my docks to only load when the image button is clicked. I also would like to have this content in the RadDock so I set up an Iframe and an image button in each dock with the following code. It doesn't work to make the frame visible and load the page. What would be the correct approach to this? thank you.

function showIframe() {

document.getElementById(

"frame1").src = "DrawingTreeView.aspx";

document.all.frame1.style.visibile =

"visible";

}

</script>
.
.
.

td>

<telerik:RadDockZone ID="RadDockZone1" runat="server" Height="200px" Width="200px" BorderWidth="0">

<telerik:RadDock ID="RadDock1" runat="server" Title="Drawing Tree"

DefaultCommands="All" Resizable="True"

OnClientDragStart="OnClientDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged"

DockHandle="TitleBar" EnableAnimation="true" EnableRoundedCorners="true">

<asp:ImageButton runat="server" ID="imgWebsiteThumbnailImage" OnLoad="btnShowThumbnailImage_Click" Visible="true" OnClientClick="showIframe" />

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</td>

2 Answers, 1 is accepted

answered on 26 Apr 2010, 04:11 PM

Hello,

First of all, let me recommend using our RadWindow control for loading an external page. Here are some of its demo examples:

I tested your code, and there seems to have the following problems:

The <iframe/> has runat="server", which means the Visible="false" will cause the actual HTML element to never be rendered. To hide the <iframe/>, please remove the Visible attribute and use CSS - for example display: none will hide the <iframe/>.
The JavaScript handler method for the clientclick event of the ImageButton is not attached properly. You need to provide the method together with the arguments - OnClientClick="showIframe(); return false;".
The page is always posted back by the image button, so even if the <iframe/> is shown, it will be hidden by the postback, and the user will never see the <iframe/>. You should cancel the postback by returning false from the function. This is shown in the modified code pasted below.

Here is the modified code:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

</Scripts>

</asp:ScriptManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function showIframe()

{

var frame = document.getElementById("<%=frame1.ClientID %>");

frame.setAttribute("src", "http://www.telerik.com");

frame.style.display = "block";

}

</script>

</telerik:RadCodeBlock>

. . .

<telerik:RadDockZone ID="RadDockZone1" runat="server" Height="600px" Width="600px"

BorderWidth="0">

<telerik:RadDock ID="RadDock1" runat="server" Title="Drawing Tree" DefaultCommands="All"

Resizable="True" DockHandle="TitleBar" EnableAnimation="true" EnableRoundedCorners="true"

Height="500px">

<ContentTemplate>

<asp:ImageButton runat="server" ID="imgWebsiteThumbnailImage" OnClientClick="showIframe(); return false;" />

<iframe id="frame1" runat="server" width="100%" height="100%" style="display:none;" />

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</form>

</body>

</html>

Sincerely yours,
Pero
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.

answered on 26 Apr 2010, 06:35 PM

That is perfect. I added a line to hide the button after it was clicked.

    
            <script type="text/javascript">  
        
                        function showIframe() {  
        
                            var frame = document.getElementById("<%=frame1.ClientID %>");  
        
                            var button = document.getElementById("<%=imgWebsiteThumbnailImage.ClientID %>");  
        
                            frame.setAttribute("src", "DrawingTreeView.aspx");  
        
                            frame.style.display = "block";  
        
                            button.style.display = "none";  
        
                        }  
        
                    </script> 
        
            ...  
        
            <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="200px" Width="200px" BorderWidth="0">  
        
                                                    <telerik:RadDock ID="RadDock1" runat="server" Title="Drawing Tree"    
        
                                                        DefaultCommands="All" Resizable="True"   
        
                                                        OnClientDragStart="OnClientDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged" 
        
                                                        DockHandle="TitleBar" EnableAnimation="true" EnableRoundedCorners="true">  
        
                                                        <ContentTemplate> 
        
                                                            <asp:ImageButton runat="server" ID="imgWebsiteThumbnailImage" OnLoad="btnShowThumbnailImage_Click" style="display:block;" OnClientClick="showIframe(); return false;"   /> 
        
                                                            <iframe id="frame1" runat="server" width="100%" height="100%" style="display:none;" /> 
        
                                                        </ContentTemplate> 
        
                                                    </telerik:RadDock> 
        
                                                </telerik:RadDockZone>