Ajax and User Controls

3 posts, 1 answers
  1. Angie
    Angie avatar
    101 posts
    Member since:
    Jan 2008

    Posted 29 Nov 2011 Link to this post

    I've recently noticed the this causes the loading panel to not work properly, which is not a big deal, but now I have run into a problem with getting a radcombobox to work, so I need to figure out how to fix this.

    The code in this user control works fine if I hardcode the control onto the page. It quits working properly (especially the radComboBox), once I change the user control to being dynamically added.

    I tried adding the ajaxsettings from the code behind on page_load, according to this example: http://www.telerik.com/help/aspnet-ajax/ajax-user-controls.html, but this also stops working when placed on a user control that is added at runtime.

    The code below is simplified to have a workable example.  Thank you for your help.

    USER CONTROL ASCX CODE

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ctrlTest.ascx.cs" Inherits="ctrlTest" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <telerik:RadAjaxManager EnableAJAX="true" ID="RadAjaxManagerlvReviews" runat="server"
        <AjaxSettings>
             <telerik:AjaxSetting AjaxControlID="pGrid"
                    <UpdatedControls
                        <telerik:AjaxUpdatedControl ControlID="pGrid"  LoadingPanelID="RadAjaxLoadingPanelCESearch"   /> 
                    </UpdatedControls
                </telerik:AjaxSetting
                 <telerik:AjaxSetting AjaxControlID="btnViewAllCECourses"
                    <UpdatedControls
                        <telerik:AjaxUpdatedControl ControlID="pGrid"  LoadingPanelID="RadAjaxLoadingPanelCESearch"   /> 
                        <telerik:AjaxUpdatedControl ControlID="pSearch"    /> 
                    </UpdatedControls
                </telerik:AjaxSetting
                <telerik:AjaxSetting AjaxControlID="btnSearchCECourses"
                    <UpdatedControls
                        <telerik:AjaxUpdatedControl ControlID="pGrid"  LoadingPanelID="RadAjaxLoadingPanelCESearch"   /> 
                        <telerik:AjaxUpdatedControl ControlID="pSearch"    /> 
                    </UpdatedControls
                </telerik:AjaxSetting
        </AjaxSettings>        
        </telerik:RadAjaxManager>
     
     <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanelCESearch" runat="server" Height="75px" Width="75px" Transparency="50" InitialDelayTime="0" >
            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'  style="border: 0px;" />
     </telerik:RadAjaxLoadingPanel>
     
    <asp:Panel ID="pSearch" runat="server">
      <telerik:radcombobox runat="server"  id="radCategories" ShowToggleImage=true Width="195px"  />
                   
                        <asp:Button ID="btnSearchCECourses" runat="server" Text="Search Courses" OnClick="btnSearchCECourses_Click" CausesValidation="False" BWidth="MedLarge" Height="27px" style="font-size:12px;"   />
                       <asp:Button ID="btnViewAllCECourses" runat="server" Text="ViewAllCourses" OnClick="btnViewAllCECourses_Click" CausesValidation="False" BWidth="MedLarge" Height="27px" style="font-size:12px;"   />
                          
    </asp:Panel>                   
                         
    <asp:Panel ID="pGrid" runat="server">
        <telerik:RadListView ID="lvCEResults" runat="server"
                OnNeedDataSource="lvCEResults_NeedDataSource"
                AllowCustomPaging="true" AllowPaging="true" ItemPlaceholderID="phRadListView"
                Width="760px"
                >
                 <LayoutTemplate>
                            <telerik:RadDataPager ID="RadDataPagerTop"  runat="server" IsTotalItemCountFixed="True" Skin="Windows7"  CssClass="Custom">
                                 <Fields>
                                        <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                                        <telerik:RadDataPagerButtonField FieldType="Numeric" />
                                        <telerik:RadDataPagerButtonField FieldType="NextLast" />
                                </Fields>        
                             </telerik:RadDataPager>
                            <div style="height:10px"></div>
                             <asp:PlaceHolder ID="phRadListView" runat="server"></asp:PlaceHolder>
                              
                               <telerik:RadDataPager ID="RadDataPagerBottom" runat="server" IsTotalItemCountFixed="True" Skin="Windows7"  CssClass="Custom">
                                 <Fields>
                                        <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                                        <telerik:RadDataPagerButtonField FieldType="Numeric" />
                                        <telerik:RadDataPagerButtonField FieldType="NextLast" />
                                </Fields>        
                             </telerik:RadDataPager>
                        </LayoutTemplate>
                         
                            <ItemTemplate>
                                 <table>
                                    <tr>
                                        <td><%#Eval("course_id") %></td>
                                        <td><%#Eval("description") %></td>
                                    </tr>
                                </table>
                             </ItemTemplate>
                        </telerik:RadListView>
     
     
     
    </asp:Panel>

    USER CONTROL CODE BEHIND

    public partial class ctrlTest : System.Web.UI.UserControl
    {
         
        DataTable dt = new DataTable();
     
        protected void Page_Load(object sender, EventArgs e)
        {
            CreateCategoryData();
        }
     
        protected void lvCEResults_NeedDataSource(object source, RadListViewNeedDataSourceEventArgs e)
        {
            CreateCEData();
            lvCEResults.VirtualItemCount = 30;
            lvCEResults.DataSource = dt;
        }
     
     
        private void CreateCEData()
        {
            dt.Columns.Add("course_id");
            dt.Columns.Add("description");
     
            for (int i = 0;i <=30;i++)
            {
                dt.Rows.Add(i,"desc" + i);
            }
     
        }
     
        private void CreateCategoryData()
        {
            DataTable dtCategories = new DataTable();
            dtCategories.Columns.Add("category_id");
            dtCategories.Columns.Add("description");
     
            for (int i = 1; i <= 30; i++)
            {
                dtCategories.Rows.Add(i, "category_" + i);
            }
     
            radCategories.Items.Add(new RadComboBoxItem("AllCategories", "0"));
     
            foreach (DataRow dr in dtCategories.Rows)
            {
                radCategories.Items.Add(new RadComboBoxItem(dr["description"].ToString(), dr["category_id"].ToString()));
            }
     
        }
     
        protected void btnSearchCECourses_Click(object sender, System.EventArgs e)
        {
                lvCEResults.CurrentPageIndex = 0;
                lvCEResults.Rebind();
             
        }
     
        protected void btnViewAllCECourses_Click(object sender, EventArgs e)
        {
                radCategories.SelectedValue = "0";
                lvCEResults.CurrentPageIndex = 0;
                lvCEResults.Rebind();
        }
     
     
    }


    Page code:

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <%@ Register TagPrefix="UC" src="ctrlTest.ascx" TagName="TEST" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
                    <asp:Panel ID="ph" runat="server" EnableViewState=true />
        </div>
        </form>
    </body>
    </html>

    Page code behind:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            ctrlTest ucSearchResults = (ctrlTest)LoadControl("ctrlTest.ascx");
            ph.Controls.Add(ucSearchResults);
        }
    }





  2. Answer
    Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 30 Nov 2011 Link to this post

    Hello Angie,

    Try adding a RadAjaxManager control to your page and changing the RadAjaxManager in your UserControl to a RadAjaxManagerProxy. That worked for me, using your example code.

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Angie
    Angie avatar
    101 posts
    Member since:
    Jan 2008

    Posted 06 Dec 2011 Link to this post

    Holy crap, that worked!!  Thanks!  :)
Back to Top