Show Iframe in RadDock on button click

3 posts, 0 answers
  1. C O
    C O avatar
    10 posts
    Member since:
    Aug 2009

    Posted 21 Apr 2010 Link to this post

    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.


    <script type="text/javascript">



    function showIframe() {



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
















    <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" />






    <iframe id="frame1" runat="server" width="100%" height="100%" visible="false" />




























  2. Pero
    Pero avatar
    1156 posts

    Posted 26 Apr 2010 Link to this post


    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" "">
    <head id="Head1" runat="server">
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function showIframe()
                    var frame = document.getElementById("<%=frame1.ClientID %>");
                    frame.setAttribute("src", "");
           = "block";
        . . .
        <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="600px" Width="600px"
            <telerik:RadDock ID="RadDock1" runat="server" Title="Drawing Tree" DefaultCommands="All"
                Resizable="True" DockHandle="TitleBar" EnableAnimation="true" EnableRoundedCorners="true"
                    <asp:ImageButton runat="server" ID="imgWebsiteThumbnailImage" OnClientClick="showIframe(); return false;" />
                    <iframe id="frame1" runat="server" width="100%" height="100%" style="display:none;" />

    Sincerely yours,
    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.
  3. Telerik UI for ASP.NET Core is out
  4. C O
    C O avatar
    10 posts
    Member since:
    Aug 2009

    Posted 26 Apr 2010 Link to this post

    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");  
           = "block";  
           = "none";  
    <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" style="display:block;" OnClientClick="showIframe(); return false;"   /> 
                                                    <iframe id="frame1" runat="server" width="100%" height="100%" style="display:none;" /> 




Back to Top