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

AjaxLoadingPanel not showing when invoking user control

7 Answers 449 Views

Grid

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

Anton asked on 28 Jan 2009, 10:53 AM

I have the following situation: rad grid is updated when event is passed from a user control on the same page, while AJAX loading works fine, and reloads the grid properly, the RadAjaxLoadingPanel does not show.

here is the simplified example of the aspx page.

    
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <%@ Register src="../../PageControls/Filters/TradeFilter.ascx" tagname="TradeFilter" tagprefix="uc1" %> 
        
            <telerik:RadAjaxManager DefaultLoadingPanelID="RadAjaxLoadingPanel1" ID="RadAjaxManager1" runat="server"> 
        
                <AjaxSettings> 
        
                    <telerik:AjaxSetting AjaxControlID="filterTrade"> 
        
                        <UpdatedControls> 
        
                            <telerik:AjaxUpdatedControl ControlID="grdTrades" LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                        </UpdatedControls> 
        
                    </telerik:AjaxSetting> 
        
                </AjaxSettings> 
        
            </telerik:RadAjaxManager> 
        
            <telerik:RadAjaxLoadingPanel BackColor="Gray" ID="RadAjaxLoadingPanel1" runat="server" Height="150px" Width="150px" Transparency="25"> 
        
                    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" /> 
        
            </telerik:RadAjaxLoadingPanel> 
        
            <uc1:TradeFilter ID="filterTrade" runat="server" /> 
        
            <telerik:RadGrid ID="grdTrades" runat="server" Skin="Web20" EnableViewState="true"> 
        
            <MasterTableView  autogeneratecolumns="true" > 
        
            </telerik:RadGrid>

As i said, the grid loads properly using AJAX and not refreshing the page, but RadAjaxLoadingPanel1 is not displayed.
If I have grid that is refreshed by aspx control, it is displayed properly.

7 Answers, 1 is accepted

answered on 29 Jan 2009, 02:25 PM

I dont see a way of attaching files, to attach sample project, so here is the code to reproduce the error:

Default.aspx

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Test._Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <%@ Register src="TestControl.ascx" tagname="TestControl" tagprefix="uc1" %> 
        
            <!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"> 
        
                <title></title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
                </asp:ScriptManager> 
        
                    <telerik:RadAjaxManager EnableAJAX="true" DefaultLoadingPanelID="RadAjaxLoadingPanel1" ID="RadAjaxManager1" runat="server"> 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="cmdTest"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="grdTest"/> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                        <telerik:AjaxSetting AjaxControlID="ctrlTest"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="grdTest"/> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                <telerik:RadAjaxLoadingPanel BackColor="Gray" ID="RadAjaxLoadingPanel1" runat="server" Height="150px" Width="150px" Transparency="25"> 
        
                        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" /> 
        
                </telerik:RadAjaxLoadingPanel> 
        
                <div> 
        
                    <asp:Button ID="cmdTest" runat="server" Text="Simple Button"  
        
                        onclick="cmdTest_Click" /> 
        
                    <uc1:TestControl ID="ctrlTest" runat="server" /> 
        
                    <telerik:RadGrid ID="grdTest"  
        
                        runat="server"> 
        
                    </telerik:RadGrid> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Default.aspx.cs

    
            using System; 
        
            using System.Collections.Generic; 
        
            using System.Threading; 
        
            namespace Test 
        
            { 
        
                struct TestObject 
        
                { 
        
                    private int id; 
        
                    private string name; 
        
                    private string comments; 
        
                    public int Id 
        
                    { 
        
                        get { return id; } 
        
                        set { id = value; } 
        
                    } 
        
                    public string Name 
        
                    { 
        
                        get { return name; } 
        
                        set { name = value; } 
        
                    } 
        
                    public string Comments 
        
                    { 
        
                        get { return comments; } 
        
                        set { comments = value; } 
        
                    } 
        
                } 
        
                public partial class _Default : System.Web.UI.Page 
        
                { 
        
                    Random rnd = new Random(); 
        
                    protected void Page_Load(object sender, EventArgs e) 
        
                    { 
        
                        if(!IsPostBack) 
        
                            ReloadGrid(); 
        
                        ctrlTest.Invoke+=ReloadGrid; 
        
                    } 
        
                    private void ReloadGrid() 
        
                    { 
        
                        Thread.Sleep(500); 
        
                        List<TestObject> list=new List<TestObject>(); 
        
                        list.Add(new TestObject {Id = rnd.Next(1, 9999), Name = "Name1", Comments = "Some Comments 1"}); 
        
                        list.Add(new TestObject { Id = rnd.Next(1, 9999), Name = "Name2", Comments = "Some Comments 2" }); 
        
                        list.Add(new TestObject { Id = rnd.Next(1, 9999), Name = "Name3", Comments = "Some Comments 3" }); 
        
                        list.Add(new TestObject { Id = rnd.Next(1, 9999), Name = "Name4", Comments = "Some Comments 4" }); 
        
                        list.Add(new TestObject { Id = rnd.Next(1, 9999), Name = "Name5", Comments = "Some Comments 5" }); 
        
                        list.Add(new TestObject { Id = rnd.Next(1, 9999), Name = "Name6", Comments = "Some Comments 6" }); 
        
                        list.Add(new TestObject { Id = rnd.Next(1, 9999), Name = "Name7", Comments = "Some Comments 7" }); 
        
                        list.Add(new TestObject { Id = rnd.Next(1, 9999), Name = "Name8", Comments = "Some Comments 8" }); 
        
                        list.Add(new TestObject { Id = rnd.Next(1, 9999), Name = "Name9", Comments = "Some Comments 9" }); 
        
                        list.Add(new TestObject { Id = rnd.Next(1, 9999), Name = "Name10", Comments = "Some Comments 10" }); 
        
                        list.Add(new TestObject { Id = rnd.Next(1, 9999), Name = "Name11", Comments = "Some Comments 11" }); 
        
                        list.Add(new TestObject { Id = rnd.Next(1, 9999), Name = "Name12", Comments = "Some Comments 12" }); 
        
                        grdTest.DataSource = list; 
        
                        grdTest.DataBind(); 
        
                    } 
        
                    protected void cmdTest_Click(object sender, EventArgs e) 
        
                    { 
        
                        ReloadGrid(); 
        
                    } 
        
                } 
        
            }

TestControl.ascx

    
            <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestControl.ascx.cs" Inherits="Test.TestControl" %> 
        
            <asp:Button ID="cmdTest2" runat="server" Text="Control Button"  
        
                onclick="cmdTest2_Click" />

TestControl.ascx.cs

    
            using System; 
        
            namespace Test 
        
            { 
        
                public partial class TestControl : System.Web.UI.UserControl 
        
                { 
        
                    public delegate void InvokeControl(); 
        
                    public event InvokeControl Invoke; 
        
                    protected void Page_Load(object sender, EventArgs e) 
        
                    { 
        
                    } 
        
                    protected void cmdTest2_Click(object sender, EventArgs e) 
        
                    { 
        
                        if (Invoke != null) 
        
                            Invoke(); 
        
                    } 
        
                } 
        
            }

As described in the first post, both buttons work correctly and reload the grid, however the button from withing the control does not display RadAjaxLoadingPanel.

Please advise.

Accepted

answered on 30 Jan 2009, 05:29 PM

Hi Anton,

I answered in the support ticket you opened on this subject.

Here is a quotation from my post in it:

Hi Antonas,

Thank you for contacting us and for the question.

The problem is caused because of the way of rendering of the User Control in the ASPX page. If you look at the view source of the rendered page, you will see that the controls from the User control are not wrapped. This cause the inability of the RadAjaxManager to find the Control (in this case the user control) and to show Loading panel.
The solution is to override the Render event in the User control and to wrap the rendered html mark-up into div container with ID, which corresponds to the ClientId of the user control. If you need to use this user control many times in the page, the user control will need to inherit INamingContainer.

Here is a code snippet showing how to achieve this:

User Control

...

protected override void Render(HtmlTextWriter writer)

        {

            writer.Write(String.Format("<div id=\"{0}\">",this.ClientID));

            base.Render(writer);

            writer.Write("</div>");

        }

Let me know whether this helps.

Best regards,
Georgi Krustev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 03 Mar 2009, 08:23 AM

Hi,
I am facing same problem but I have different scenario. My application contains only user controls and two pages which create user control at runtime on these pages. I setup RadAjaxManagerProxy on user control and RadAjaxManager on page. Ajax works fine and but Ajax Loading Panel does not shown.

I try the above solution to override User Control Render functions but no success. Here is the my sample page and user control source:

    
            //Page 
        
            <%@ Page  Async="true"  Trace="false"  Language="C#" AutoEventWireup="True" EnableEventValidation="false" CodeBehind="LoadPage.aspx.cs" Inherits="CS.BaseWeb.LoadPage" MasterPageFile="~/Components/Templates/Base.master" EnableViewState="true"%> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
             <asp:Content ID="content1" ContentPlaceHolderID="CentralColumn" runat="server" > 
        
                 <asp:ScriptManager id="ScriptManager1" ScriptMode="Release" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError"></asp:ScriptManager> 
        
                 <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" EnableStyleSheetCombine="true" OutputCompression="AutoDetect"></telerik:RadStyleSheetManager> 
        
                 <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"></telerik:RadAjaxManager> 
        
                 <asp:PlaceHolder ID="phControlHolder" Runat="server" Visible="True"></asp:PlaceHolder> 
        
            </asp:Content> 
        
            //User Control 
        
            <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProductListNew1.ascx.cs" Inherits="CS.BaseWeb.Components.ControlLibrary.Product.ProductListNew1" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <table id="tbl_ProductList" style="width: 100%;" cellpadding="0" cellspacing="0"> 
        
             <tr> 
        
                 <td style="width: 100%"> 
        
               <telerik:RadAjaxPanel ID="pnlgridActiveEnquiryInfo" runat="server"> 
        
               <telerik:RadGrid 
        
                    ID="gridActiveEnquiryInfo" 
        
                    runat="server" 
        
                    AutoGenerateColumns="False"  
        
                    GridLines="None" Skin="Office2007" Width="99.7%" 
        
                    OnNeedDataSource = "gridActiveEnquiryInfo_NeedDataSource" 
        
                    OnItemDataBound = "gridActiveEnquiryInfo_ItemDataBound" 
        
                    OnItemCommand="gridActiveEnquiryInfo_ItemCommand"  
        
                    OnDetailTableDataBind="gridActiveEnquiryInfo_DetailTableDataBind"> 
        
                    <ClientSettings> 
        
                    <Selecting AllowRowSelect="True" /> 
        
                    </ClientSettings> 
        
                    <MasterTableView Width="100%"  DataKeyNames="EnquiryId"  Name="ActiveEnquiryGrid" HierarchyLoadMode="Client"   > 
        
                      <DetailTables > 
        
                        <telerik:GridTableView ClientDataKeyNames="OrderId" runat="server" Name="OrdersGrid"> 
        
                            <RowIndicatorColumn> 
        
                                <HeaderStyle Width="20px" /> 
        
                            </RowIndicatorColumn> 
        
                            <ExpandCollapseColumn> 
        
                                <HeaderStyle Width="20px" /> 
        
                            </ExpandCollapseColumn> 
        
                                <Columns> 
        
                                    <telerik:GridBoundColumn  
        
                                            DataField="OrderId"  
        
                                            UniqueName="OrderId"  
        
                                            HeaderText="PackageId"  
        
                                            Display="False"> 
        
                                        <HeaderStyle Width="10%"></HeaderStyle> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn  
        
                                            DataField="LongName" UniqueName="Location" HeaderText="Location"> 
        
                                        <HeaderStyle Width="10%"></HeaderStyle> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn  
        
                                            DataField="CustomerPackageName" UniqueName="CustomerPackageName" HeaderText="Customer Package Name"> 
        
                                        <HeaderStyle Width="20%"></HeaderStyle> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn  
        
                                            UniqueName="Date" HeaderText="DateCreated" DataField="DateCreated" DataFormatString="{0: dd/MM/yy}"> 
        
                                        <HeaderStyle Width="10%"></HeaderStyle> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn  
        
                                            UniqueName="GroupSize" HeaderText="People" DataField="GroupSize"> 
        
                                        <HeaderStyle Width="10%"></HeaderStyle> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn  
        
                                            UniqueName="Nights" HeaderText="Nights" DataField="Nights"> 
        
                                        <HeaderStyle Width="5%"></HeaderStyle> 
        
                                    </telerik:GridBoundColumn>                           
        
                                    <telerik:GridBoundColumn  
        
                                            UniqueName="DayTimeProducts" HeaderText="Day Time" DataField="DayTimeProducts"> 
        
                                        <HeaderStyle Width="20%"></HeaderStyle> 
        
                                    </telerik:GridBoundColumn>                           
        
                                    <telerik:GridBoundColumn  
        
                                            UniqueName="NightLifeProducts" HeaderText="Night Life" DataField="NightLifeProducts"> 
        
                                        <HeaderStyle Width="20%"></HeaderStyle> 
        
                                    </telerik:GridBoundColumn>  
        
                                    <telerik:GridBoundColumn  
        
                                            UniqueName="StatusId"  
        
                                            HeaderText="StatusId"  
        
                                            DataField="StatusId" 
        
                                            Display="False" 
        
                                            > 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn  
        
                                            UniqueName="ActualCost" HeaderText="Cost &#163; PP" DataField="ActualCost" DataFormatString="{0:f}"> 
        
                                        <HeaderStyle Width="10%"></HeaderStyle> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn  
        
                                            UniqueName="QuotePrice" HeaderText="Quote &#163; PP" DataField="QuotePrice" DataFormatString="{0:f}"> 
        
                                        <HeaderStyle Width="10%"></HeaderStyle> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridTemplateColumn ShowSortIcon="False" UniqueName="UnLink" HeaderText="Un-Link"> 
        
                                        <HeaderStyle Width="5%" HorizontalAlign="Left"></HeaderStyle> 
        
                                        <ItemStyle Width="2%" HorizontalAlign="Left"></ItemStyle> 
        
                                        <ItemTemplate> 
        
                                            <asp:ImageButton  
        
                                                    ID="imgLink"  
        
                                                    runat="server"  
        
                                                    CommandName="UnLinkOrder"  
        
                                                    OnClientClick="return confirm('Do you want to Un-Link the Package?');" 
        
                                                    CssClass="Hand" 
        
                                                    AlternateText="Un-Link"  
        
                                                    ImageUrl="~/Components/Images/UI/link_add.png"  
        
                                                    Height="16px" Width="18px" 
        
                                                /> 
        
                                        </ItemTemplate> 
        
                                    </telerik:GridTemplateColumn> 
        
                                    <telerik:GridTemplateColumn ShowSortIcon="False" UniqueName="View" HeaderText="View"> 
        
                                        <HeaderStyle Width="5%" HorizontalAlign="Left"></HeaderStyle> 
        
                                        <ItemStyle Width="2%" HorizontalAlign="Left"></ItemStyle> 
        
                                        <ItemTemplate> 
        
                                            <asp:ImageButton  
        
                                                    ID="imgViewPackage"   
        
                                                    runat="server"  
        
                                                    CommandName="ViewPackage"  
        
                                                    CssClass="Hand" 
        
                                                    AlternateText="View"  
        
                                                    ImageUrl="~/Components/Images/UI/eye.png"  
        
                                                    Height="16px"  
        
                                                    Width="18px" 
        
                                                meta:resourcekey="hlViewProductResource1" /> 
        
                                        </ItemTemplate> 
        
                                    </telerik:GridTemplateColumn> 
        
                                <telerik:GridTemplateColumn HeaderText="Booking" UniqueName="Booking"> 
        
                                    <HeaderStyle Width="3%" HorizontalAlign="Left" /> 
        
                                        <ItemTemplate> 
        
                                            <asp:ImageButton  
        
                                                CssClass="Hand"  
        
                                                ID="imgViewBooking"  
        
                                                runat="server"  
        
                                                Height="16px"  
        
                                                Width="18px" 
        
                                                ImageUrl="~/Components/Images/UI/heart.png" 
        
                                                Visible="false" 
        
                                                /> 
        
                                        </ItemTemplate> 
        
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="3%" /> 
        
                                </telerik:GridTemplateColumn>                        
        
                                </Columns> 
        
                        </telerik:GridTableView> 
        
                    </DetailTables> 
        
                        <RowIndicatorColumn> 
        
                            <HeaderStyle Width="20px" /> 
        
                        </RowIndicatorColumn> 
        
                        <ExpandCollapseColumn 
        
                            Visible="True"> 
        
                            <HeaderStyle Width="20px" /> 
        
                        </ExpandCollapseColumn> 
        
                        <Columns> 
        
                            <telerik:GridBoundColumn  
        
                                DataField="CustomerId"  
        
                                HeaderText="Customer Id"  
        
                                UniqueName="CustomerId"  
        
                                Visible="False"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn 
        
                                DataField="CustomerName" 
        
                                HeaderText="Customer"  
        
                                UniqueName="CustomerName"> 
        
                                <HeaderStyle Width="20%" /> 
        
                                <ItemStyle Width="20%" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn 
        
                                DataField="EnquiryId" 
        
                                HeaderText="Enq Id"  
        
                                UniqueName="EnquiryId"> 
        
                                <HeaderStyle Width="5%" /> 
        
                                <ItemStyle  
        
                                    HorizontalAlign="Center"  
        
                                    VerticalAlign="Middle"  
        
                                    Width="5%" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn 
        
                                DataField="UsageType" 
        
                                HeaderText="Usage Type"  
        
                                UniqueName="UsageType"> 
        
                                <HeaderStyle Width="10%" /> 
        
                                <ItemStyle Width="10%" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn 
        
                                DataField="UsageTypeId" 
        
                                HeaderText="UsageTypeId"  
        
                                UniqueName="UsageTypeId" 
        
                                Display="False" 
        
                                > 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn  
        
                                DataField="DateFrom"  
        
                                HeaderText= "Event Date" 
        
                                UniqueName="DateFrom"  
        
                                DataFormatString="{0:ddd dd MMM yy}"> 
        
                             <ItemStyle Width="10%" /> 
        
                            <HeaderStyle Width="10%" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridTemplateColumn 
        
                                DataField="Duration" 
        
                                HeaderText="Duration" 
        
                                UniqueName="Duration"> 
        
                                <ItemTemplate> 
        
                                    <asp:Label 
        
                                        ID="lblDuration" 
        
                                        runat="server"> 
        
                                    </asp:Label> 
        
                                </ItemTemplate> 
        
                                <HeaderStyle Width="5%" /> 
        
                                <ItemStyle  
        
                                    HorizontalAlign="Center"  
        
                                    VerticalAlign="Middle"  
        
                                    Width="5%" /> 
        
                            </telerik:GridTemplateColumn> 
        
                            <telerik:GridBoundColumn 
        
                                DataField="LocationId" 
        
                                HeaderText="LocationId"  
        
                                UniqueName="LocationId" 
        
                                Display="False" 
        
                                > 
        
                            </telerik:GridBoundColumn>                 
        
                            <telerik:GridBoundColumn 
        
                                DataField="CityName" 
        
                                HeaderText="Location"  
        
                                UniqueName="CityName"> 
        
                                <HeaderStyle Width="10%" /> 
        
                                <ItemStyle Width="10%" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn 
        
                                DataField="GroupSize" 
        
                                HeaderText="People"  
        
                                UniqueName="GroupSize"> 
        
                                <HeaderStyle Width="5%" /> 
        
                                <ItemStyle  
        
                                    HorizontalAlign="Center"  
        
                                    VerticalAlign="Middle"  
        
                                    Width="5%" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn 
        
                                DataField="Email" 
        
                                HeaderText="E-mail"  
        
                                UniqueName="Email"> 
        
                                <HeaderStyle Width="20%" /> 
        
                                <ItemStyle Width="20%" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn 
        
                                DataField="Phone" 
        
                                HeaderText="Phone"  
        
                                UniqueName="Phone"> 
        
                                <HeaderStyle Width="8%" /> 
        
                                <ItemStyle Width="8%" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn 
        
                                DataField="Mobile" 
        
                                HeaderText="Mobile"  
        
                                UniqueName="Mobile"> 
        
                                <HeaderStyle Width="8%" /> 
        
                                <ItemStyle Width="8%" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridTemplateColumn HeaderText="Swap" UniqueName="Swap"> 
        
                                <HeaderStyle Width="3%" HorizontalAlign="Left" /> 
        
                                    <ItemTemplate> 
        
                                        <asp:ImageButton 
        
                                            ID="imgSwapEnquiry" 
        
                                            CssClass="Hand" 
        
                                            runat="server" 
        
                                            ImageUrl="~/Components/Images/UI/replace2.png" Height="16px" Width="18px" ToolTip="Swap"/> 
        
                                    </ItemTemplate> 
        
                                <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="3%" /> 
        
                            </telerik:GridTemplateColumn> 
        
                            <telerik:GridTemplateColumn HeaderText="View" UniqueName="View"> 
        
                                <HeaderStyle Width="3%" HorizontalAlign="Left" /> 
        
                                    <ItemTemplate> 
        
                                        <asp:ImageButton  
        
                                            CssClass="Hand" ID="imgViewEnquiry" runat="server" Height="16px" Width="18px" 
        
                                            ImageUrl="~/Components/Images/UI/eye.png"/> 
        
                                    </ItemTemplate> 
        
                                <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="3%" /> 
        
                            </telerik:GridTemplateColumn> 
        
                            <telerik:GridTemplateColumn 
        
                                HeaderText="Remove" 
        
                                UniqueName="DeleteEnquiry"> 
        
                                <HeaderStyle Width="3%" HorizontalAlign="Left" /> 
        
                                    <ItemTemplate> 
        
                                        <asp:ImageButton 
        
                                            ID="imgDeleteEnquiry" 
        
                                            CssClass="Hand" 
        
                                            OnClientClick="return confirm('Do you want to Delete the Enquiry?');" 
        
                                            runat="server" 
        
                                            CommandName="DeleteEnquiry" 
        
                                            ImageUrl="~/Components/Images/UI/delete.png" 
        
                                            Height="16px" Width="18px" ToolTip="Remove"/> 
        
                                    </ItemTemplate> 
        
                                <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" Width="3%" /> 
        
                            </telerik:GridTemplateColumn> 
        
                        </Columns> 
        
                    </MasterTableView> 
        
                   <FilterMenu EnableTheming="True" Skin="Office2007"> 
        
                       <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                   </FilterMenu> 
        
                 </telerik:RadGrid> 
        
                </telerik:RadAjaxPanel> 
        
                </td> 
        
             </tr> 
        
            </table> 
        
            <telerik:RadAjaxManagerProxy ID="AjaxManagerProxy" runat="server"> 
        
            <AjaxSettings> 
        
                <telerik:AjaxSetting AjaxControlID="AjaxManagerProxy"> 
        
                    <UpdatedControls> 
        
                        <telerik:AjaxUpdatedControl ControlID="pnlgridActiveEnquiryInfo" LoadingPanelID="loadingdata"/> 
        
                        <telerik:AjaxUpdatedControl ControlID="gridActiveEnquiryInfo" LoadingPanelID="loadingdata" /> 
        
                        </UpdatedControls> 
        
                </telerik:AjaxSetting> 
        
            <telerik:AjaxSetting AjaxControlID="gridActiveEnquiryInfo"> 
        
                    <UpdatedControls> 
        
                        <telerik:AjaxUpdatedControl ControlID="gridActiveEnquiryInfo" LoadingPanelID="loadingdata" /> 
        
            </AjaxSettings> 
        
            </telerik:RadAjaxManagerProxy> 
        
            <script> 
        
              function UpdateEnQuiryGrid() 
        
                {         
        
                    $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("Update-ProductList-EnquiryGrid"); 
        
                } 
        
            </script>

answered on 05 Mar 2009, 11:15 AM

Hi,

I suppose the problem is caused because of using the RadAjaxManager and RadAjaxPanel to ajaxify controls. Please use only one of them.

If you are using only RadAjaxPanel you can set the LoadingPanelID and this is the only thing you should do to show the AjaxLoadingPanel. The code below shows how to achieve this:

    
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" LoadingPanelID="LoadingPanelID" runat="server"> 
        
                    <%-- The mark-up code goes here --%> 
        
                </telerik:RadAjaxPanel>

If you need to ajaxify the controls with RadAjaxManager you should not use RadAjaxPanel with it.
Your declaration of RadAjaxManager is right and if you remove the RadAjaxPanel there should be no reason to have problem showing the loading panel.

Kind regards,
Georgi Krustev
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 24 Nov 2010, 12:52 PM

hello Georgi Krustev
I am using the license version of Telerik for more than a month. I am working on a problem but I cannot find the solution. The problem is almost similar to the Anton. Anton had his usercontrol static but I have dynamic usercontrols. I have Grid in the main page i.e (aspx page). I update the grid when the user clicks on the Grid rows.

<telerik:RadAjaxManager ID="ajaxManager" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="gvMemberList">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="gvMemberList" LoadingPanelID="ajaxLoadingPanel" />

UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="tabMemberDetails">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="tabMemberDetails" />

<telerik:AjaxUpdatedControl ControlID="tabDetails" LoadingPanelID="ajaxLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

I have the RadTab in the same page.

telerik:RadGrid ID="gvMemberList" runat="server" OnNeedDataSource="gvMemberList_NeedDataSource"

AllowPaging="True" SkinsPath="RadControls/Skins" EnableAJAX="True"

OnItemDataBound="gvMemberList_ItemDataBound" PageSize="10" Visible="true" CellPadding="0" AutoGenerateColumns="false" Skin="WebBlue">

<MasterTableView DataKeyNames="CTLMember" FilterItemStyle-Width="1%">

<Columns>

<telerik:GridNumericColumn DataField="HCCMRank" HeaderText="HCCM Rank" UniqueName="HCCMRank" HeaderStyle-HorizontalAlign="Center" FilterControlWidth="25px">

</telerik:GridNumericColumn>

..................

..................

</Columns>

</MasterTableView>

</telerik:RadGrid>

<telerik:RadTabStrip ID="tabMemberDetails" runat="server" Skin="WebBlue" MultiPageID="tabDetails" SelectedIndex="0" Align="Justify" ClickSelectedTab="true" EnableViewState="false"

ReorderTabsOnSelect="true" Width="1139px" OnTabClick="tabMemberDetails_Click"

ScrollChildren="true">

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="tabDetails" ScrollBars="Auto" runat="server" SelectedIndex="0" CssClass="pageView" Width="1137px" Height="470px">

</telerik:RadMultiPage>

Now depending upon the Tabs clicked, I load the different usercontrols dynamically in the tabMemberDetails_Click.

protected void tabMemberDetails_Click(object sender, RadTabStripEventArgs e)

{

Condition1 ....

UserControl control=LoadControl("Control1.ascx");

Condition2.....

UserControl control=LoadControl("Control2.ascx");

Telerik.Web.UI.RadPageView view = new RadPageView();

view.Controls.Add(control);

tabDetails.PageViews.Add(view);

tabDetails.DataBind();

}

one of the usercontrol part is something like this.

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btnSave">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="panel" LoadingPanelID="ajaxLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadAjaxLoadingPanel ID="ajaxLoadingPanel" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />

In the userControls, I have buttons and I have exposed buttonClick events from usercontrol which i use in the main page as similar to the Anton has exposed. In that event I rebind the gvMemberlist grid. Till here everythings is fine. gvMemberList is rebound when i click the button inside the usercontrol . however the gvMemberlist is not being refreshed. I cannot addsetting for the usercontrols in the main page because they are generated dynamically.

Could you please help me with this problem. how to refresh the controls in the main page when some event of usercontrol occurs? Am I missing anything in the AjaxSettings.

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

AjaxLoadingPanel not showing when invoking user control

7 Answers, 1 is accepted