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

AJAXified Master Page Problem with iFrame

1 Answer 106 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Kirtika Patel
Top achievements
Rank 2
Kirtika Patel asked on 26 Sep 2008, 06:03 AM

Situation:-

I have master page which contain radtreeview. The Master Page also contains the content place holder in it which have an iframe, which loads the child pages in it. What i am doing is using the RadAjaxManager for updating the content place holder when user clicks on the treeview & the relevent page is loaded in the iframe.

My problem :-

I want to load page iframe the ajax way, currently it shows the progress bar in browser while loading the page in iframe. Is it possible to have it complete AJAX base (i.e. no postbacks) while loading the page in iframe & updating the data in master page from iframe. we are not binded to specific controls, we can use some other RAD Telerik controls in place of iframe.

Sample Code:-

Master Page

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage1.master.cs" Inherits="TelerikTesting.MasterPage1" %>
<%@ 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 runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
       <telerik:RadScriptManager ID="rscriptmgrMain" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadSplitter ID="rsplitMain" runat="server" Width="780px" Skin="Office2007"
            LiveResize="True">
            <telerik:RadPane ID="rpaneSelectOptions" runat="server" Width="">
                <telerik:RadSlidingZone ID="rslidezoneMain" runat="server" SlideDirection="Right">
                    <telerik:RadSlidingPane ID="SlidePaneOne" runat="server" Title="SlidePan One">
                        <telerik:RadTreeView ID="RadTreeView1" runat="server" OnNodeClick="RadTreeView1_NodeClick"
                            Skin="Office2007">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Main">
                                    <Nodes>
                                        <telerik:RadTreeNode runat="server" Text="Google" Value="G" >
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="MSN" Value="M">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="Telerik" Value="T">
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                            </Nodes>
                            <CollapseAnimation Duration="100" Type="OutQuint" />
                            <ExpandAnimation Duration="100" />
                        </telerik:RadTreeView>
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="SlidePaneTwo" runat="server" Title="SlidePan Two">
                        Pane Two</telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadPane ID="rpaneContent" runat="server">
                <asp:Panel ID="contentPanel" runat="server">
                    <asp:ContentPlaceHolder ID="rightContentPlaceHolder" runat="server">
                    </asp:ContentPlaceHolder>
                </asp:Panel>
            </telerik:RadPane>
        </telerik:RadSplitter>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTreeView1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="contentPanel" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
            Width="75px">
            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                style="border: 0px;" />
        </telerik:RadAjaxLoadingPanel>
    </form>
</body>

Master Page CodeBehind:-

protected void RadTreeView1_NodeClick(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e)
        {
            if (e.Node.Value == "G")
            {
                ((System.Web.UI.HtmlControls.HtmlContainerControl)rightContentPlaceHolder.FindControl("iframe1")).Attributes["src"] = "http://www.google.com";
            }
            else if (e.Node.Value == "M")
            {
                ((System.Web.UI.HtmlControls.HtmlContainerControl)rightContentPlaceHolder.FindControl("iframe1")).Attributes["src"] = "http://www.msn.com";
            }
            else if (e.Node.Value == "T")
            {
                ((System.Web.UI.HtmlControls.HtmlContainerControl)rightContentPlaceHolder.FindControl("iframe1")).Attributes["src"] = "http://www.telerik.com";
            }
            else
            {
                ((System.Web.UI.HtmlControls.HtmlContainerControl)rightContentPlaceHolder.FindControl("iframe1")).Attributes["src"] = "about:blank";
            }
        }

Content Page:-

<%@ Page Language="C#" MasterPageFile="~/MasterPage1.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TelerikTesting.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="rightContentPlaceHolder" runat="Server">   
    <div style="height:100%;background-color: #f1f1f1;">
   
        <iframe id="iframe1" runat="server" height="100%" width="100%" style="background-color: #f1f1f1;
            border: 0px; border-spacing: 0px; float: left; vertical-align: top;" frameborder="0"
            scrolling="auto"></iframe> 
                    
    </div>
</asp:Content>

looking for your earliest reply.

Thanks,

1 Answer, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 29 Sep 2008, 03:23 PM
Hello Bhavin,

Please review the following help topics which could help you to acheive the required scenario:

RadAjax and WebUserControls
RadAjax and MasterPage
MasterPages: ajaxify and update controls in master and content page
MasterPages: initiating requests from one ContentPlaceHolder and loading/updating controls in another
Load user controls










All the best,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Ajax
Asked by
Kirtika Patel
Top achievements
Rank 2
Answers by
Maria Ilieva
Telerik team
Share this question
or