AJAX loading image displayed only once

11 posts, 0 answers
  1. Maciej Sasiuk
    Maciej Sasiuk avatar
    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.
  2. Dimo
    Admin
    Dimo avatar
    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
  3. Maciej Sasiuk
    Maciej Sasiuk avatar
    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!
  4. kiteloop
    kiteloop avatar
    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();
            }
        }
    }
  5. Cori
    Cori avatar
    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.
  6. kiteloop
    kiteloop avatar
    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.
  7. Dimo
    Admin
    Dimo avatar
    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"
     
    <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
  8. kiteloop
    kiteloop avatar
    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)
  9. Dimo
    Admin
    Dimo avatar
    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
  10. kiteloop
    kiteloop avatar
    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?
  11. Dimo
    Admin
    Dimo avatar
    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
Back to Top