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

Ajax Loading panel with user controls

11 Answers 976 Views

Ajax

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

EmpowerIT asked on 04 Feb 2008, 11:34 PM

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

11 Answers, 1 is accepted

answered on 05 Feb 2008, 11:39 AM

AJAXEnabledWebSite.zip

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

answered on 05 Feb 2008, 10:33 PM

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

answered on 19 Feb 2009, 12:01 AM

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.

answered on 19 Feb 2009, 08:37 AM

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.

answered on 19 Feb 2009, 11:00 PM

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

    
             <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" />  
        
                            </UpdatedControls>  
        
                        </telerik:AjaxSetting>  
        
              </AjaxSettings>  
        
                </telerik:RadAjaxManager>

answered on 20 Feb 2009, 05:56 AM

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.

answered on 23 Jul 2009, 09:40 PM

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."

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Ajax Loading panel with user controls

11 Answers, 1 is accepted