Ajax and User Controls

[Angie]

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

<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" />
    <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);
    }
}

[Kevin]

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.

[Angie]

Holy crap, that worked!!  Thanks!  :)