AJAX loading image displayed only once

[Maciej Sasiuk]

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.

[Dimo]

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

[Maciej Sasiuk]

Yup, moving RadAjaxManager to master page did the trick. :)
Thank you very much for your support!

[kiteloop]

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();
        }
    }
}

[Cori]

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.

[kiteloop]

Thanks for the reply. Tried it but it did not solve the problem Im afraid.

[Dimo]

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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<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

[kiteloop]

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)

[Dimo]

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

[kiteloop]

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?

[Dimo]

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