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

AJAX loading image displayed only once

10 Answers 94 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Maciej Sasiuk
Top achievements
Rank 1
Maciej Sasiuk asked on 27 Aug 2010, 01:55 PM
Hello,

I'm using Sitefinity 3.7 with RadControls Q1 2010 SP2. I've made custom user controls which I'm using on my pages.
When I use RadAjaxLoadingPanel with RadAjaxManager, AJAX is working great but the loading image is displayed only once, unless I reload the page. Same with RadGrid and ShowStatusBar set to true. AJAX is working but the loading image on the status bar is displayed only once. Same behaviour on FireFox and IE, so I assume it's not browser related issue.

10 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Aug 2010, 03:08 PM
Hello Maciej,

Please make sure that the RadAjaxManager is placed inside the MasterPage. Here is a scenario, which works:


MasterPage

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
         
<telerik:RadAjaxManager runat="server" ID="ManagerAjax" DefaultLoadingPanelID="LoadingPanel1"></telerik:RadAjaxManager>


UserControl

<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" Skin="Vista" ></telerik:RadAjaxLoadingPanel>
<telerik:RadGrid runat="server" ID="RadGrid1" AutoGenerateColumns="false" Skin="Vista" AllowPaging="true" PageSize="10">
 <MasterTableView CommandItemDisplay="TopAndBottom" AutoGenerateColumns="False"  DataKeyNames="ID"  AllowAutomaticInserts="false"  TableLayout="Auto">
    <Columns>
    <telerik:GridCheckBoxColumn HeaderText="GridCheckBox"  UniqueName="GridCheckBox" />
    <telerik:GridBoundColumn HeaderText="Title" DataField="Title" UniqueName="Title" />
     <telerik:GridBoundColumn HeaderText="ID" DataField="ID" UniqueName="ID" />
      
      <telerik:GridTemplateColumn UniqueName="TemplateColumn"  HeaderText="Check/Uncheck box">
          <ItemTemplate>
               <asp:CheckBox id="CheckBox1" runat="server" AutoPostBack="false" OnCheckedChanged="CheckChanged"></asp:CheckBox>
          </ItemTemplate>
      </telerik:GridTemplateColumn>
    </Columns>
 </MasterTableView>
 </telerik:RadGrid>


UserControl code-behind

protected override void OnInit(EventArgs e)
{
    RadAjaxManager ajaxManager = RadAjaxManager.GetCurrent(this.Page);
    if (ajaxManager != null)
    {
        ajaxManager.AjaxSettings.AddAjaxSetting(RadGrid1, RadGrid1, LoadingPanel1);
    }
}


Sincerely yours,
Dimo
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
0
Maciej Sasiuk
Top achievements
Rank 1
answered on 30 Aug 2010, 12:57 PM
Yup, moving RadAjaxManager to master page did the trick. :)
Thank you very much for your support!
0
kiteloop
Top achievements
Rank 1
answered on 31 Aug 2010, 09:17 PM
Hello,

I have a similiar problem but im using vanilla asp.net 4 (no sitefinity).
I have the radajaxmanager inside the masterpage but im using the radajaxmanagerproxy on a page to point to which controls should be updated through ajax, som of theese controls are custom user controls with their own OnChecked OnUpdateD events.

I have tried the proxy and your example from code-behind, doing it from the code without success. It only fires the first loadingpanel but when I make the second ajax request it doesnt open the loadingpanel but the ajax request works fine.


<%@ Page Title="" Language="C#" MasterPageFile="~/MasterV2.Master" AutoEventWireup="true" CodeBehind="Tmp.aspx.cs"
    Inherits="NS.Tmp" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contentBody" runat="server">
    <telerik:RadAjaxManagerProxy ID="RadAjaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="pnlPackages">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlPackages" LoadingPanelID="pnlLoading" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="screenSelector" EventName="CheckedChanged">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlPackages" LoadingPanelID="pnlLoading" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <asp:Panel runat="server" ID="pnlPackages" Visible="true">
        <asp:Button runat="server" ID="screenSelector" OnClick="tst_Click" />
        <asp:Literal runat="server" ID="litText" Text="Button" />
    </asp:Panel>
    <telerik:RadAjaxLoadingPanel runat="server" ID="pnlLoading">
        Test
    </telerik:RadAjaxLoadingPanel>
</asp:Content>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace NS
{
    public partial class Tmp : BasePage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        protected void tst_Click(object sender, EventArgs e)
        {
            litText.Text = DateTime.Now.ToString();
        }
    }
}
0
Cori
Top achievements
Rank 2
answered on 31 Aug 2010, 09:25 PM
Hello kiteloop,

Try reorganizing your AjaxSettings so the button one comes before the panel. Like so:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterV2.Master" AutoEventWireup="true" CodeBehind="Tmp.aspx.cs"
    Inherits="NS.Tmp" %>
   
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contentBody" runat="server">
    <telerik:RadAjaxManagerProxy ID="RadAjaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="screenSelector" EventName="CheckedChanged">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlPackages" LoadingPanelID="pnlLoading" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="pnlPackages">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlPackages" LoadingPanelID="pnlLoading" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <asp:Panel runat="server" ID="pnlPackages" Visible="true">
        <asp:Button runat="server" ID="screenSelector" OnClick="tst_Click" />
        <asp:Literal runat="server" ID="litText" Text="Button" />
    </asp:Panel>
    <telerik:RadAjaxLoadingPanel runat="server" ID="pnlLoading">
        Test
    </telerik:RadAjaxLoadingPanel>
</asp:Content>

I hope that helps.
0
kiteloop
Top achievements
Rank 1
answered on 31 Aug 2010, 09:34 PM
Thanks for the reply. Tried it but it did not solve the problem Im afraid.
0
Dimo
Telerik team
answered on 01 Sep 2010, 09:03 AM
Hi Oskar,

The following scenario works as expected on my side:

Master Page

<%@ Master Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
<asp:ContentPlaceHolder id="head" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" />
 
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" />
 
</form>
</body>
</html>


Content Page

<%@ Page Title="" Language="C#" MasterPageFile="~/_master.master" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<script runat="server">
 
    protected void tst_Click(object sender, EventArgs e)
    {
        litText.Text = DateTime.Now.ToString();
    }
     
</script>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 
<telerik:RadAjaxManagerProxy ID="RadAjaxManager" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="pnlPackages">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlPackages" LoadingPanelID="pnlLoading" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="screenSelector" EventName="CheckedChanged">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlPackages" LoadingPanelID="pnlLoading" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
<asp:Panel runat="server" ID="pnlPackages" Visible="true">
    <asp:Button runat="server" ID="screenSelector" OnClick="tst_Click" />
    <asp:Literal runat="server" ID="litText" Text="Button" />
</asp:Panel>
<telerik:RadAjaxLoadingPanel runat="server" ID="pnlLoading">
    Test
</telerik:RadAjaxLoadingPanel>
 
</asp:Content>


Greetings,
Dimo
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
0
kiteloop
Top achievements
Rank 1
answered on 01 Sep 2010, 07:24 PM
This is the scariest solution I´ve ever found!
I tested with your masterpage and it works, and then started to copy stuff from my real masterpage to that dummy. Im using the RadScriptManager instead of the vanilla asp scriptmanager, but the error is the same in both.

If I removed the style sheet imports, it works!
Trying to remove different style sheets and it was my lofi.css which is the problem.

<link rel="stylesheet" type="text/css" href="/styles/lofi.css" />
<style type="text/css">
        @import "/styles/hifi.css";
        more here...
</style>

And the funniest thing is, my lofi.css is completly empty! Not a single line of css inside of it. Also tried to add stuff to it but it doesnt help the problem. Could this be referenced in some way from the jQuery-scripts which fires the loadingpanel and it interfere with the normal telerik-stylesheets?
Im using the Q2-release (not the last of them)
0
Dimo
Telerik team
answered on 02 Sep 2010, 10:32 AM
Hello Oskar,

The problem is more likely to be caused by the RadAjaxManager's parsing of CSS file registrations during AJAX request.

Possible workarounds are:

1) use a <link> tag instead of <style>@import</style> to register CSS files
or
2) set EnablePageHeadUpdate="false" to the RadAjaxManager - however, this is not recommended if you show invisible controls after an AJAX request, because they will not be able to register their skins properly in the <head>

Regards,
Dimo
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
0
kiteloop
Top achievements
Rank 1
answered on 02 Sep 2010, 08:54 PM
Hello!


1) use a <link> tag instead of <style>@import</style> to register CSS files

The strange thing is style>@import is working but all styles included in the head without @import or link is causing the problem.

or
2) set EnablePageHeadUpdate="false" to the RadAjaxManager - however, this is not recommended if you show invisible controls after an AJAX request, because they will not be able to register their skins properly in the <head>
Okay will test but my solution is easier but a bit to clumpsy, it´s just easier to remove the styles from head or move them to imports.

Can you reproduce this at your end?
0
Dimo
Telerik team
answered on 03 Sep 2010, 06:49 AM
Hello Oskar,

I can reproduce such a problem is I include a <style> tag with a comment inside the <head>.

Sincerely yours,
Dimo
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
Tags
Ajax
Asked by
Maciej Sasiuk
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Maciej Sasiuk
Top achievements
Rank 1
kiteloop
Top achievements
Rank 1
Cori
Top achievements
Rank 2
Share this question
or