Rank 2
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
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.