Telerik Forums / UI for ASP.NET AJAX Forum / Ajax /

AJAX loading image displayed only once

Telerik UI for ASP.NET AJAX
Resources Buy Try

11 posts, 0 answers

Maciej Sasiuk

2 posts

Member since:
Apr 2010

Posted 27 Aug 2010 Link to this post

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
Admin

8482 posts

Posted 27 Aug 2010 Link to this post

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
Maciej Sasiuk

2 posts

Member since:
Apr 2010

Posted 30 Aug 2010 Link to this post

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

7 posts

Member since:
Apr 2010

Posted 31 Aug 2010 Link to this post

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

562 posts

Member since:
Jul 2010

Posted 31 Aug 2010 Link to this post

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

7 posts

Member since:
Apr 2010

Posted 31 Aug 2010 Link to this post

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

8482 posts

Posted 01 Sep 2010 Link to this post

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

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
kiteloop

7 posts

Member since:
Apr 2010

Posted 01 Sep 2010 Link to this post

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
Admin

8482 posts

Posted 02 Sep 2010 Link to this post

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
kiteloop

7 posts

Member since:
Apr 2010

Posted 02 Sep 2010 Link to this post

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
Admin

8482 posts

Posted 03 Sep 2010 Link to this post

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

AJAX loading image displayed only once

Maciej Sasiuk

Dimo

Maciej Sasiuk

kiteloop

Cori

kiteloop

Dimo

kiteloop

Dimo

kiteloop

Dimo