I have a question regarding the Ajax loading panel.
I have a page, showing thumbnails of an image; when these are clicked on the larger version is shown in a main image above.
I ajaxified this with Rad Ajax Manager, no problem. But if I add a Loading Panel, it's not shown. If however I ditch the Ajax Manager and wrap a Ajax Panel round the controls in question, the Loading Panel displays correctly; but in this case the thumbnails reload on Ajax postback too, which I don't want.
Can you tell me how to get this working with the AjaxManager? Here is my code snippet below:
<asp:Content ID="Content2" ContentPlaceHolderID="maincontent" Runat="Server"> |
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> |
<rad:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="LoadingPanel1"> |
<AjaxSettings> |
<rad:AjaxSetting AjaxControlID="repThumbnails"> |
<UpdatedControls> |
<rad:AjaxUpdatedControl ControlID="imgPhoto" LoadingPanelID="LoadingPanel1" /> |
</UpdatedControls> |
</rad:AjaxSetting> |
</AjaxSettings> |
</rad:RadAjaxManager> |
<rad:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" MinDisplayTime="1000" Style="width: 570px;"> |
<img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading6.gif") %>' alt="Loading..." title="Loading..." style="border: 0; padding-top: 180px;" /> |
</rad:RadAjaxLoadingPanel> |
<h1>Photos</h1> |
<div id="photocontainer"><asp:Image ID="imgPhoto" runat="server" AlternateText="The Boathouse" ToolTip="The Boathouse" /></div> |
<asp:Repeater ID="repThumbnails" runat="server" OnItemDataBound="repThumbnails_ItemDataBound" OnItemCommand="repThumbnails_ItemCommand"> |
<HeaderTemplate><div id="thumbnailcontainer"></HeaderTemplate> |
<ItemTemplate> |
<div class="thumbnail"><asp:ImageButton ID="lnkThumb" runat="server" ToolTip="Enlarge" AlternateText="Enlarge" CommandName="ThumbnailClick" /></div> |
<br id="rowBreak" runat="server" visible="false" class="clear" /> |
</ItemTemplate> |
<FooterTemplate></div></FooterTemplate> |
</asp:Repeater> |
</asp:Content> |
Thanks, Matt
13 Answers, 1 is accepted
Will it be convenient for you to open a regular support ticket and send us sample runnable project, which replicates the issue? We will test the application locally and advise you further.
Kind regards,
Maria Ilieva
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
I'm facing the same problem, therfore I would really appreciate posting the solution in here in order to use.
I'm testing Telerik ASP,NET AJAX, yet didn't buy the new 2009 Q3 suit.
Regards,
Could you please elaborate a bit more on your scenario? It will be best if you send us a simple working application with reproduced this erroneous behavior or at least to share your problematic page code. Thus we could do our best to help you further in resolving it.
Looking forward for your reply.
Greetings,
Pavlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Dear Pavlina,
What I’m trying to do is to retrieve and display specific database records after 5 seconds from the overall page load. Therefore I used a repeater, AJAX Manager, and AJAX Load Panel to accomplish that scenario as per the below,
1. Page loads and initiate the JavaScript timer function
2. Timer function triggers after 5 seconds and calls AJAXReq function
3. AJAXReq function sends a request behind the scene to the server to update the pre-configured AJAX Manager components (controls to be updated by AJAX request)
4. Server receives the request, gets the needed records and populate a SQL reader that becomes lately the repeater data source
5. The repeater is refreshed and displays results as listed points
The problem in the above scenario is that I can’t see the AJAX Load Panel at all, however if you change the repeater to a label, then the AJAX Load Panel will show.
Below is the page HTML/JavaScript code
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="AjaxBoxes.aspx.vb" Inherits="AjaxBoxes" %> |
<!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></title> |
</head> |
<body onload="initTimer();"> |
<form id="form1" runat="server"> |
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
</telerik:RadScriptManager> |
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" |
RequestQueueSize="5" UpdatePanelsRenderMode="Inline"> |
<AjaxSettings> |
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1"> |
<UpdatedControls> |
<telerik:AjaxUpdatedControl ControlID="Repeater1" |
LoadingPanelID="RadAjaxLoadingPanel1" /> |
</UpdatedControls> |
</telerik:AjaxSetting> |
</AjaxSettings> |
</telerik:RadAjaxManager> |
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server" |
Skin="Office2007" BackColor="White"> |
</telerik:RadAjaxLoadingPanel> |
<div style=" background-color:#eeeeee;width:400px; height:200px;"> |
<br /> |
<ul> |
<asp:Repeater ID="Repeater1" runat="server"> |
<ItemTemplate> |
<li> |
<%#Container.DataItem("Name")%> |
</li> |
</ItemTemplate> |
</asp:Repeater> |
</ul> |
</div> |
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> |
<script language="javascript" type="text/javascript"> |
var id; |
function initTimer() { |
id= setTimeout('AJAXReq()', 5000); |
} |
function AJAXReq(){ |
var ajaxManager = <%=RadAjaxManager1.ClientID %>; |
ajaxManager.ajaxRequest(); |
clearTimeout(id); |
} |
</script> |
</telerik:RadCodeBlock> |
</form> |
</body> |
</html> |
Below is the Code behind code
Imports System.Data.SqlClient |
Partial Class AjaxBoxes |
Inherits System.Web.UI.Page |
Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As Telerik.Web.UI.AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest |
Threading.Thread.Sleep(2000) |
Dim x As New Database |
Dim s1 As SqlDataReader = x.ExecuteReader("Select Query") |
Me.Repeater1.DataSource = s1 |
Me.Repeater1.DataBind() |
s1.Close() |
End Sub |
End Class |
Thanks for your help and support.
Regards,
The asp:Repeater control does not render according to the requirements for ajax "aware" control, specifically it does not render in a single tag. Please nest the Repeater in asp:Panel and set it as initiator and updated control and then loading panel should display.
Best wishes,
Pavlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
With Ajax Manager you could ajaxify all controls that normally work with postbacks:
http://www.telerik.com/help/aspnet-ajax/ajxajaxmanager.html
AJAX Loading Panel is a control that could be displayed when a request is performed and the page is loading silently:
http://www.telerik.com/help/aspnet-ajax/ajxloadingpanel.html
In your first question maybe you mean the difference between RadAjaxManager and RadAjaxPanel? If so here is the documentation article which explains when you should use Ajax Manager and when Ajax Panel:
http://www.telerik.com/help/aspnet-ajax/manager-vs-panel.html
As for your second question you could try using Fiddler or Charles for ajax monitoring. They are HTTP monitors which logs all HTTP(S) traffic between your computer and the Internet.
I hope this helps.
Kind regards,
Radoslav
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
I have used some customcontrol and try to ajax loading them, but the loading panel do not displayed.
I tried to add asp:panel to the customcontrols but seems no use.
How can I found which control is "wrong", so I can rewrite or surround with a Panel?
Or there is a easy way to make the loading panel displayed(It can be in the whole page)?
RadAjaxLoadingPanel searches for an HTML element, which has an ID equal to the client ID of the updated control. Do you have such an element? For example user controls do not render such a wrapper element. Maybe your custom control does not render it either.
If you need further assistance, please provide a simple runnable demo.
Regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.