Hi there,
Apologies in advance if this is a daft question, but I am somewhat confused. I am using a RadMenu control (ID="TopMasterLinksMenu") as the navigation bar for my site, with the text and URLs of the items coming from a SQL database as shown in the code below. I want to be able to click an item in the nav bar and have the rest of the page (below the nav bar) updated without the screen flickering. (In my site the top nav is contained in a master page, but I thought I'd simplify the example here.)
If I click an item that has no associated URL, I can use the RadAjaxManager control to have the page updated without flickering, as shown in the code below. If I click an item with a URL, however, the whole screen flickers as the new page is loaded. This seems logical to me, in that asking for an entirely new page is different to posting the same page back to the server; however, I can see from http://uk.news.yahoo.com/world.html, for example, that you can click on top-nav links on a site and have the lower portion of the screen be served a new page without the screen flickering. (Try clicking e.g. Politics or Sport.)
Is there a way to do this with the RadMenu?
All advice gratefully received; let me know if you need further explanation.
Thanks,
Ed Graham
+++++++++++++++++++++++++++++++++++++
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TempTelerik.aspx.cs" Inherits="TempTelerik" %>
<%@ 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>Temp Telerik</title>
<link type="text/css" rel="Stylesheet" href="StyleSheet.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ASPScriptManager" runat="server"></asp:ScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="TopMasterLinksMenu">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="lblLeft" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<div id="TopNav">
<div id="Title">Political Studies Association</div>
<div id="SearchBar">Searching, logging in etc.</div>
<div id="Divider"> </div>
<div id="Links">
<telerik:RadMenu ID="TopMasterLinksMenu" runat="server" DataFieldID="ID" DataFieldParentID="ParentID" DataSourceID="SQLLinkData" DataTextField="Text" DataNavigateUrlField="URL" CssClass="TopMasterLinksMenu" onitemclick="TopMasterLinksMenu_ItemClick">
</telerik:RadMenu>
<asp:SqlDataSource ID="SQLLinkData" runat="server" ConnectionString="<%$ConnectionStrings:PSATestsConnectionString %>"
SelectCommand="SELECT Menu1ID AS ID, null AS ParentID, L1 AS Text, URL FROM tblMenu1">
</asp:SqlDataSource>
</div>
<div class="WhiteSpace"></div>
</div>
<div id="MiddleContent">
<div id="LeftNav">
<asp:Label ID="lblLeft" runat="server" Text="Default text" ></asp:Label>
</div>
</div>
</form>
</body>
</html>
In the code-behind file:
protected void TopMasterLinksMenu_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)
{
lblLeft.Text = e.Item.Text;
}
Apologies in advance if this is a daft question, but I am somewhat confused. I am using a RadMenu control (ID="TopMasterLinksMenu") as the navigation bar for my site, with the text and URLs of the items coming from a SQL database as shown in the code below. I want to be able to click an item in the nav bar and have the rest of the page (below the nav bar) updated without the screen flickering. (In my site the top nav is contained in a master page, but I thought I'd simplify the example here.)
If I click an item that has no associated URL, I can use the RadAjaxManager control to have the page updated without flickering, as shown in the code below. If I click an item with a URL, however, the whole screen flickers as the new page is loaded. This seems logical to me, in that asking for an entirely new page is different to posting the same page back to the server; however, I can see from http://uk.news.yahoo.com/world.html, for example, that you can click on top-nav links on a site and have the lower portion of the screen be served a new page without the screen flickering. (Try clicking e.g. Politics or Sport.)
Is there a way to do this with the RadMenu?
All advice gratefully received; let me know if you need further explanation.
Thanks,
Ed Graham
+++++++++++++++++++++++++++++++++++++
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TempTelerik.aspx.cs" Inherits="TempTelerik" %>
<%@ 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>Temp Telerik</title>
<link type="text/css" rel="Stylesheet" href="StyleSheet.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ASPScriptManager" runat="server"></asp:ScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="TopMasterLinksMenu">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="lblLeft" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<div id="TopNav">
<div id="Title">Political Studies Association</div>
<div id="SearchBar">Searching, logging in etc.</div>
<div id="Divider"> </div>
<div id="Links">
<telerik:RadMenu ID="TopMasterLinksMenu" runat="server" DataFieldID="ID" DataFieldParentID="ParentID" DataSourceID="SQLLinkData" DataTextField="Text" DataNavigateUrlField="URL" CssClass="TopMasterLinksMenu" onitemclick="TopMasterLinksMenu_ItemClick">
</telerik:RadMenu>
<asp:SqlDataSource ID="SQLLinkData" runat="server" ConnectionString="<%$ConnectionStrings:PSATestsConnectionString %>"
SelectCommand="SELECT Menu1ID AS ID, null AS ParentID, L1 AS Text, URL FROM tblMenu1">
</asp:SqlDataSource>
</div>
<div class="WhiteSpace"></div>
</div>
<div id="MiddleContent">
<div id="LeftNav">
<asp:Label ID="lblLeft" runat="server" Text="Default text" ></asp:Label>
</div>
</div>
</form>
</body>
</html>
In the code-behind file:
protected void TopMasterLinksMenu_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)
{
lblLeft.Text = e.Item.Text;
}
3 Answers, 1 is accepted
0
Ed
Top achievements
Rank 1
Rank 1
answered on 17 Jul 2008, 12:43 PM
Further to my first post, I am becoming convinced that AJAX (Telerik or otherwise) cannot help reduce flicker when changing pages. Instead I'll look for a Javascript solution.
0
Accepted
Hello Ed,
Ajax technology is applicable for POST requests in most cases. You can use so called fajax instead:
http://www.nikhilk.net/Fajax.aspx
Sincerely yours,
Vlad
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Ajax technology is applicable for POST requests in most cases. You can use so called fajax instead:
http://www.nikhilk.net/Fajax.aspx
Sincerely yours,
Vlad
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Ed
Top achievements
Rank 1
Rank 1
answered on 21 Jul 2008, 10:06 AM
Thanks for that, Vlad -- I have heard of that under the name "IE Page Transitions". The trouble is, they don't work for Firefox (or many other browsers, I understand) ... still, better than nothing.
Cheers,
Ed
Cheers,
Ed