Ajax Loading panel with user controls

12 posts, 0 answers
  1. EmpowerIT
    EmpowerIT avatar
    117 posts
    Member since:
    Jun 2007

    Posted 04 Feb 2008 Link to this post

    Hi,
    I have a page in which i have a RadGrid and a custom control (which contains a RadTreeView) .

    The custom control contains a RadAjaxManager Proxy which specifies the RadTree to update various things inside the control.

    On my aspx page, i have an instance of a the RadAjaxManager and i have specified that my custom control should update the RadGrid.

    The problem is that the loading panel does not seem to appear when the RadGrid is updated via the user control, even though the rad grid gets updated. Clicking on the RadTreeView in the user control will cause a loading panel to appear inside the user control, due to the fact of using the RadAjaxManagerProxy.
    If i click on the actual RadGrid, which uses the RadAjaxManager on the page , the loading panel does appear.
    Am I missing something in order to get a loading panel to appear when it is triggered by a custom user control?

    Here is my RadAjaxManager definition:
     <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
                <AjaxSettings> 
                    <telerik:AjaxSetting AjaxControlID="myAdminTree"
                    <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" /> 
                    </UpdatedControls> 
                    </telerik:AjaxSetting> 
                    <telerik:AjaxSetting AjaxControlID="RadGrid1"
                    <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"/> 
                    </UpdatedControls> 
                    </telerik:AjaxSetting> 
                </AjaxSettings> 
            </telerik:RadAjaxManager> 

    myAdminTree is the custom user control which contains a RadTreeView among other things
  2. Plamen Peshev
    Admin
    Plamen Peshev avatar
    886 posts

    Posted 05 Feb 2008 Link to this post

    Hi EmpowerIT,

    I tried to reproduce the problem at our side, but to no avail (see attached). Can you reproduce the problem with the project I attached? Could you please modify it so that the problem appears and tell us what changes you made.

    Expecting your reply.




    All the best,
    Plamen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. EmpowerIT
    EmpowerIT avatar
    117 posts
    Member since:
    Jun 2007

    Posted 05 Feb 2008 Link to this post

    Hi,
    I managed to reproduce the problem with a few changes ... The code follows:

    Default.aspx:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title>Untitled Page</title> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <div> 
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
                    <AjaxSettings> 
                        <telerik:AjaxSetting AjaxControlID="WebUserControl1"
                            <UpdatedControls> 
                                <telerik:AjaxUpdatedControl ControlID="MyLabel" /> 
                            </UpdatedControls> 
                        </telerik:AjaxSetting> 
                    </AjaxSettings> 
                </telerik:RadAjaxManager> 
                 
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" 
                    Width="75px"
                    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
                        style="border: 0px;" /> 
                </telerik:RadAjaxLoadingPanel> 
       
                <telerik:RadSplitter ID="RadSplitter1" runat="server" Skin="WebBlue" Height="650px" Orientation="Vertical"
                <telerik:RadPane ID="treePane" runat="server" Height="272px" Locked="True" Width="206px"
                    <asp:Button ID="Button1" runat="server" Text="Button1" /> 
                     <uc1:WebUserControl ID="WebUserControl1" runat="server"  GridID="MyLabel"/> 
                    </telerik:RadPane> 
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" EnableEmbeddedSkins="False" /> 
                <telerik:RadPane ID="gridPane" runat="server" Height="701px" Width="880px" >    
                     <asp:Label ID="MyLabel" runat="server"></asp:Label> 
                    </telerik:RadPane> 
                    </telerik:RadSplitter> 
                
     
            </div> 
        </form> 
    </body> 
    </html> 

    WebUserControl.ascx:
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server"
        <AjaxSettings> 
            <telerik:AjaxSetting AjaxControlID="RadTreeView1" > 
                <UpdatedControls> 
                <telerik:AjaxUpdatedControl ControlID="RadTreeView1" /> 
                </UpdatedControls> 
            </telerik:AjaxSetting> 
        </AjaxSettings> 
    </telerik:RadAjaxManagerProxy> 
      
     
    <telerik:RadTreeView ID="RadTreeView1" runat="server" > 
    <Nodes> 
    <telerik:RadTreeNode Text="Node1"
    <Nodes> 
    <telerik:RadTreeNode Text="Node22"></telerik:RadTreeNode> 
    <telerik:RadTreeNode Text="Node32"></telerik:RadTreeNode> 
    <telerik:RadTreeNode Text="Node42"
    <Nodes> 
    <telerik:RadTreeNode Text="Node222"></telerik:RadTreeNode> 
    <telerik:RadTreeNode Text="Node322"></telerik:RadTreeNode> 
    <telerik:RadTreeNode Text="Node422"></telerik:RadTreeNode> 
    </Nodes> 
    </telerik:RadTreeNode> 
    </Nodes> 
    </telerik:RadTreeNode> 
    <telerik:RadTreeNode Text="Node2"></telerik:RadTreeNode> 
    </Nodes> 
    </telerik:RadTreeView> 

    WebUserControl.ascx.cs:

    using System; 
    using System.Data; 
    using System.Configuration; 
    using System.Collections; 
    using System.Web; 
    using System.Web.Security; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.WebControls.WebParts; 
    using System.Web.UI.HtmlControls; 
    using Telerik.Web.UI; 
     
    public partial class WebUserControl : System.Web.UI.UserControl 
        private string _gridID; 
        public string GridID 
        { 
            get { return _gridID; } 
            set { _gridID = value; } 
        } 
     
        protected void Page_Load(object sender, EventArgs e) 
        { 
            RadTreeView1.NodeClick += new Telerik.Web.UI.RadTreeViewEventHandler(RadTreeView1_NodeClick); 
        } 
     
        void RadTreeView1_NodeClick(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e) 
        { 
            Label grid = this.Page.FindControl(_gridID) as Label; 
            if (grid != null
                grid.Text = e.Node.Text + " " + DateTime.Now.ToString(); 
        } 


    The major difference here is that im using the RadSplitter control as well, i think that is the cause of the problem. In this case I'm just using a label in the second pane as an example, and the problem doesn't seem to be as severe.
    However, I am using a  RadGrid in the real project, and lots of data is being bound to it, there is about a 1-2 second delay before it updates ... I really need the loading panel to appear over that area while its loading ...

    Thanks,
    Fayez

  5. Plamen Peshev
    Admin
    Plamen Peshev avatar
    886 posts

    Posted 08 Feb 2008 Link to this post

    Hi EmpowerIT,

    You can always manually force the ajax loding panel to Show/Hide by using the code provided in this help article: Show and hide loading panel explicitly.


    Hope this helps.


    Greetings,
    Plamen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Richard
    Richard avatar
    63 posts
    Member since:
    Apr 2008

    Posted 19 Jan 2009 Link to this post

    Is manually forcing the event the only way to accomplish this?  I am in the same situation and have a lot of pages to manage. 

    I'd like to know if there is an explaination for why the AjaxManager won't show the updating "whirly-gig" when you click on a user control that contains a RadTreeView that exists inside of a RadSplitter and have it update a RadGrid.

  7. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 20 Jan 2009 Link to this post

    Hi Richard,

    Basically, the loading panel show be displayed when you use RadAjaxManager/RadAjaxManagerProxy with loading panel assigned for updated controls in webform/user control scenario. Alternatively, you can show/hide the loading panel explicitly as suggested previously in this thread.

    Best
    Sebastian
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. EmpowerIT
    EmpowerIT avatar
    117 posts
    Member since:
    Jun 2007

    Posted 18 Feb 2009 Link to this post

    Hi,
    I am still having a related issue. I shall explain

    I have a custom user control that fires off a click event. This event should update a RadGrid on the page. The only problem is that no matter how i set up the rad ajax manager, I cannot get the loading panel to appear over the rad grid. The ajax update happens, but the loading panel is not displayed.

    Steps to reproduce:

    1. Create a custom user control that has a button inside of it. Have this cusom control bubble up the 'click' event from the inside button.

    2. Add this custom user control and a rad grid summary to an aspx page

    3. Setup a radajaxmanager to have this user control update the rad grid. Set up a loading panel to appear over the rad grid.

    4. Have the click even of the custom user contronl cause the radgrid to update.

    As you should see, the rad grid will be updated correctly, howver the loading panel does not appear. I don't want to have to toggle the loading panel manually if there is another way.
  9. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 19 Feb 2009 Link to this post

    Hello EmpowerIT,

    If you marked the user control as an initiator or an updated control through RadAjaxManager setting, the ajax loading panel may not appear because RadAjax relies on id from rendered html element on the page to display it. Since your custom user control is not rendered as a separate html element, RadAjax updates the content inside it but is not able to show the loading image.

    To bypass this unexpected behavior, consider wrapping the custom user control inside a standard asp Panel and specify this panel as initiator or updated control.

    Kind regards,
    Sebastian
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  10. EmpowerIT
    EmpowerIT avatar
    117 posts
    Member since:
    Jun 2007

    Posted 19 Feb 2009 Link to this post

    Hi

    Thanks for the response. Just to make it clearer I had to wrap the button with asp:panel.

    The radajax manager had to be setup so that the panel was the initatiator and the actual user control and the other control that required updating were set as the updated controls
    E.G

    1  <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="GrayLoadingPanel">  
    2         <AjaxSettings>  
    3             <telerik:AjaxSetting AjaxControlID="ASPPanel">  
    4                 <UpdatedControls>  
    5                     <telerik:AjaxUpdatedControl ControlID="CustomerUserControl1" LoadingPanelID="GrayLoadingPanel" />  
    6                      <telerik:AjaxUpdatedControl ControlID="RadGridSummary" LoadingPanelID="GrayLoadingPanel" />  
    7                 </UpdatedControls>  
    8             </telerik:AjaxSetting>  
    9   </AjaxSettings>  
    10     </telerik:RadAjaxManager>  


  11. SamJ
    SamJ avatar
    101 posts
    Member since:
    Jul 2008

    Posted 19 Feb 2009 Link to this post

    Hi,

    Try modifying your ajax settings like this:

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="GrayLoadingPanel">   
         <AjaxSettings>   
              <telerik:AjaxSetting AjaxControlID="ASPPanel">   
                  <UpdatedControls>   
                       <telerik:AjaxUpdatedControl ControlID="CustomerUserControl1" LoadingPanelID="GrayLoadingPanel" />   
                       <telerik:AjaxUpdatedControl ControlID="RadGridSummary" LoadingPanelID="GrayLoadingPanel" />   
                       <telerik:AjaxUpdatedControl ControlID="ASPPanel" />   
                  </UpdatedControls>   
              </telerik:AjaxSetting>   
         </AjaxSettings>   
    </telerik:RadAjaxManager>  

    This should work for sure.


  12. Brent
    Brent avatar
    8 posts
    Member since:
    Feb 2008

    Posted 23 Jul 2009 Link to this post

    Thanks to Sebastian's recommendation (copied below), I was able to debug the problem(s) outlined in this thread. A more elegant solution which I implemented is to render a tag for the user control:

            Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)

                writer.Write("<div ")
                writer.WriteAttribute("id", Me.ClientID)
                writer.WriteLine(">")

                MyBase.Render(writer)

                writer.WriteEndTag("div")

            End Sub

    Essentially, this provides a client side element for your user control that can be accessed by the AjaxManager, or anything else which needs a direct client side reference. This let me AJAX update with a LoadingPanel a section of the page based on handling a specific custom event raised by the user control. Where my AJAX manager looks like the following:

        <telerik:RadAjaxManagerProxy ID="RadAjaxProxy1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="MyUserControl1" EventName="MyUserControlCustomEvent">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="LoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>



    "If you marked the user control as an initiator or an updated control through RadAjaxManager setting, the ajax loading panel may not appear because RadAjax relies on id from rendered html element on the page to display it. Since your custom user control is not rendered as a separate html element, RadAjax updates the content inside it but is not able to show the loading image.

    To bypass this unexpected behavior, consider wrapping the custom user control inside a standard asp Panel and specify this panel as initiator or updated control."

  13. Brad
    Brad avatar
    39 posts
    Member since:
    Aug 2010

    Posted 27 Sep 2010 Link to this post

    Brent, worked like a charm!

    Thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017