AjaxManager RadWindows and Multiple UserControls

[Adam Thompson]

HI,

I am having some problems implementing a complex ajax solution into SharePoint and was hoping for some help. I am building a SharePoint webpart with several UserControls, some of which are in RadWindows, I have read several threads and have attempted several approaches, and still cant seem to get the technique hashed out.

Here is an example of what I am trying to do.

I have one main UserControl which Contains all the rest of the user controls.

ViewInitializer.ascx

<%@ Assembly Name="Remington.Sali.View, Version=1.0.0.0, Culture=neutral, PublicKeyToken=2261864871064238" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SaliViewInitializer.ascx.cs" Inherits="Remington.Sali.View.Sali.SaliViewInitializer" %>
<%@ Register Assembly="Telerik.Web.UI, Version=2009.3.1314.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="Telerik" %>
<%@ Register TagPrefix="ctrl" TagName="RepActivitiesView" Src="ActivitiesView.ascx" %>
<%@ Register TagPrefix="ctrl" TagName="StudentSearchView" Src="StudentSearchView.ascx" %>
<%@ Register TagPrefix="ctrl" TagName="LeadInsertView" Src="LeadInsertView.ascx" %>
<%@ Register TagPrefix="ctrl" TagName="StudentActivitiesView" Src="StudentActivitiesView.ascx" %>
<%@ Register TagPrefix="ctrl" TagName="StudentMultipleInquiriesView" Src="StudentMultipleInquiryView.ascx" %>
<%@ Register TagPrefix="ctrl" TagName="StudentStateManagementView" Src="StudentStateManagementView.ascx" %>
<%@ Register TagPrefix="ctrl" TagName="StudentDetailsView" Src="StudentDetailsView.ascx" %>
<%@ Register TagPrefix="ctrl" TagName="AddEditActivityView" Src="AddEditActivityView.ascx" %>

<Telerik:RadSkinManager ID="TelRadSkinMngrMain" runat="server" Skin="Windows7" />
<Telerik:RadScriptManager ID="rsmSaliScriptManager" runat="server" EnablePartialRendering="true" />
<Telerik:RadAjaxManager ID="RadAjaxManager" runat="server" OnAjaxRequest="AjaxManager_AjaxRequest" >
</Telerik:RadAjaxManager>

<Telerik:RadCodeBlock ID="RadCodeBlock" runat="server">
<script type="text/javascript">

    function AjaxRequest(arguments) {
        var ajaxManager = $find("<%= RadAjaxManager.ClientID %>");
        ajaxManager.ajaxRequest(arguments);
    }





//    function showContent() {
//        //hide loading status...
//        document.getElementById("loading").style.display = 'none';

//        //show content
//        document.getElementById("content").style.display = 'block';
//    }

    function Init() {
        if (document && document.getElementById) {
            var divStudentInformation = document.getElementById("divStudentInformation");
            var divRepActivities = document.getElementById("divRepActivities");
            if (divStudentInformation && divRepActivities) {
                divStudentInformation.style.display = "block";
                divRepActivities.style.display = "none";
            }

//            window.onload = function() {
//                showContent();
//            }
//
//            //
//
//            document.write('<div id="loading">Loading... Please wait.</div>');
//            document.getElementById("content").style.display = 'none';
        }
    }

    function TelRadPnlBarLeftmenu_ClickHandler(sender, eventArgs) {

        if (document && document.getElementById) {

            var pbItemText = eventArgs.get_item().get_text();
            var divStudentInformation = document.getElementById("divStudentInformation");
            var divRepActivities = document.getElementById("divRepActivities");

            if (divStudentInformation && divRepActivities) {

                if (pbItemText == "Students") {
                    divStudentInformation.style.display = "block";
                    divRepActivities.style.display = "none";
                }

                if (pbItemText == "Activities") {
                    divStudentInformation.style.display = "none";
                    divRepActivities.style.display = "block";
                }

                if (pbItemText == "Lead Insert") {

                    var oWnd = $find("<%=TelRadWindowAddLead.ClientID%>");
                    oWnd.show();
                    //window.radopen(null, "TelRadWindowAddLead");
                }

            }
        }
    }

    function CloseLeadInsertForm() {
        var oWnd = $find("<%=TelRadWindowAddLead.ClientID%>");
        oWnd.close();
    }

    function CloseAddEditActivityForm() {
        var oWnd = $find("<%=AddActivityWIndow.ClientID%>");
        oWnd.close();
    }

    function StudentActivitiesToolBar_ClickHandler(sender, eventArgs) {
        //If you open the window by javascript, you will need to
        //cancel the postback event and to execute the javascript:

        var commandName = eventArgs.get_item().get_commandName();

        //Checks which item is clicked
        if (commandName == "AddActivity") {

            // Open Window
            var oWnd = $find("<%=AddActivityWIndow.ClientID%>");
            oWnd.show();

            AjaxRequest('InitAddEditActivityForm')

        }

    }



    </script>
</Telerik:RadCodeBlock>



<div id="content">
<div id="DivSaliMain" runat="server" style="height: 600px; width: 100%;">
    <Telerik:RadToolBar ID="TelRadToolBarAdmin" CssClass="fontMenuSuper" runat="server"
        Orientation="Horizontal" Width="100%" Height="30px" Style="z-index: 90001">
        <Items>
            <Telerik:RadToolBarButton ID="RadToolBarBtn" runat="server" Text="Rep Select">
                <ItemTemplate>
                  <div style="text-align:right;">
                    <Telerik:RadComboBox ID="ddlAdminSelectRep" AutoPostBack="true" Visible="false" runat="server"
                        OnSelectedIndexChanged="ddlAdminSelectRep_OnSelectedIndexChanged">
                    </Telerik:RadComboBox>
                  </div>
                </ItemTemplate>
            </Telerik:RadToolBarButton>
        </Items>
    </Telerik:RadToolBar>
    <Telerik:RadSplitter ID="TelRadSpltrMain" ResizeWithBrowserWindow="true" ResizeWithParentPane="true"
        runat="server" Height="100%" Width="100%" ResizeMode="EndPane" RegisterWithScriptManager="true">
        <Telerik:RadPane MaxWidth="220" MinWidth="125" ID="TelRadPnLeftMenu" runat="server"
            Collapsed="false" Width="220px" Scrolling="None" Height="100%" BackColor="#CEDFF3">
            <Telerik:RadPanelBar runat="server" ID="TelRadPnlBarLeftmenu" Width="100%" Height="100%"
                ExpandMode="FullExpandedItem" BorderWidth="0px"
                AllowCollapseAllItems="False" OnClientItemClicked="TelRadPnlBarLeftmenu_ClickHandler">
                <Items>
                    <Telerik:RadPanelItem Text="Students" Expanded="true" ImageUrl="~/Resources/Images/Students.gif"
                        Height="95%">
                        <Items>
                            <Telerik:RadPanelItem>
                                <ItemTemplate>
                                    <Telerik:RadTreeView ID="RadTreeView1" runat="server">
                                        <ContextMenus>
                                            <Telerik:RadTreeViewContextMenu ID="FilterContextMenu" runat="server">
                                                <Items>
                                                    <Telerik:RadMenuItem Text="New Filter" />
                                                </Items>
                                            </Telerik:RadTreeViewContextMenu>
                                        </ContextMenus>
                                        <Nodes>
                                            <Telerik:RadTreeNode ImageUrl="~/Resources/Images/Filter.gif" Text="My Filters" ContextMenuID="FilterContextMenu">
                                            </Telerik:RadTreeNode>
                                        </Nodes>
                                    </Telerik:RadTreeView>
                                    <Telerik:RadTreeView ID="TelRadTreeViewFilters" runat="server" OnNodeClick="TelRadTreeViewFilters_OnNodeClick">
                                        <Nodes>
                                            <Telerik:RadTreeNode ImageUrl="~/Resources/Images/Item.gif" Text="My Leads" />
                                            <Telerik:RadTreeNode ImageUrl="~/Resources/Images/Item.gif" Text="Unassigned Leads" />
                                        </Nodes>
                                    </Telerik:RadTreeView>
                                </ItemTemplate>
                            </Telerik:RadPanelItem>
                        </Items>
                    </Telerik:RadPanelItem>
                    <Telerik:RadPanelItem Text="Activities" ImageUrl="~/Resources/Images/Calendar.gif"
                        Height="95%">
                        <Items>
                            <Telerik:RadPanelItem>
                                <ItemTemplate>
                                    <Telerik:RadCalendar runat="server" ID="cldrActivityDateSelect" EnableMultiSelect="false"
                                        OnSelectionChanged="cldrActivityDateSelect_OnSelectionChanged" AutoPostBack="true" />
                                    <br />
                                    <div style="text-align: center;">
                                        <asp:Button ID="btnViewAllMyActivities" OnClick="btnViewAllMyActivities_Click" Text="All My Activities"
                                            runat="server" />
                                    </div>
                                </ItemTemplate>
                            </Telerik:RadPanelItem>
                        </Items>
                    </Telerik:RadPanelItem>
                    <Telerik:RadPanelItem Text="Lead Insert" Height="95%" Expanded="false" PreventCollapse="true" ImageUrl="~/Resources/Images/Students.gif">
                    </Telerik:RadPanelItem>
                </Items>
            </Telerik:RadPanelBar>
        </Telerik:RadPane>
        <Telerik:RadSplitBar Font-Bold="True" ID="TelRadSplitBarLeftMenu" Width="100%" SkinID="Windows7"
            runat="server" CollapseMode="Forward" RegisterWithScriptManager="true" EnableEmbeddedSkins="True"
            Height="100%" EnableEmbeddedScripts="True" />
        <Telerik:RadPane ID="TelRadPnMain" RegisterWithScriptManager="true" runat="server"
            Width="100%" Height="100%" Scrolling="None">
            <div id="DivMainAppLoad" runat="server" style="height: 100%; width: 100%">
                <div id="divStudentInformation">

                    <Telerik:RadSplitter RegisterWithScriptManager="true" ID="TelRadSplitterStudentInfo"
                        ResizeWithBrowserWindow="true" runat="server" Height="100%" Width="100%" Orientation="Horizontal"
                        ResizeWithParentPane="true" ResizeMode="EndPane">
                        <Telerik:RadPane ID="TelRadPaneStudentInfoTop" runat="server"
                            Collapsed="false" Width="100%" Height="100%" Scrolling="None">
                            <ctrl:StudentSearchView ID="ctrlStudentSearchView" runat="server" />
                        </Telerik:RadPane>
                        <Telerik:RadSplitBar ID="TelRadsplitbarStudentDetailItems"
                            runat="server" CollapseMode="Forward" />
                        <Telerik:RadPane Height="100%" Width="100%" ID="TelRadPnStudentItems" RegisterWithScriptManager="true"
                            runat="server" Scrolling="None" Collapsed="false">
                            <Telerik:RadTabStrip runat="server" ID="TelRadTabStripStudentItems" SelectedIndex="0"
                                MultiPageID="TelRadMultiPageStudentItems"
                                OnTabClick="TelRadTabStripStudentItems_OnTabClick">
                                <Tabs>
                                    <Telerik:RadTab Text="Student Details">
                                    </Telerik:RadTab>
                                    <Telerik:RadTab Text="Activities">
                                    </Telerik:RadTab>
                                    <Telerik:RadTab Text="Inquiries">
                                    </Telerik:RadTab>
                                    <Telerik:RadTab Text="Admissions Tasks">
                                    </Telerik:RadTab>
                                </Tabs>
                            </Telerik:RadTabStrip>
                            <Telerik:RadMultiPage runat="server" ScrollBars="None" ID="TelRadMultiPageStudentItems"
                                SelectedIndex="0" Height="370" Width="100%" RegisterWithScriptManager="true">
                                <Telerik:RadPageView runat="server" ID="RadPageView1" Width="100%" Height="100%">
                                    <ctrl:StudentDetailsView ID="ctrlStudentDetailsView" runat="server" />
                                </Telerik:RadPageView>
                                <Telerik:RadPageView runat="server" ID="TelRadPageVwActivities" Width="100%" Height="100%">
                                    <ctrl:StudentActivitiesView ID="ctrlStudentActivitiesView" runat="server" />
                                </Telerik:RadPageView>
                                <Telerik:RadPageView runat="server" ID="TelRadPageVwMultInquirys">
                                    <ctrl:StudentMultipleInquiriesView ID="ctrlStudentMultipleInquiriesView" runat="server" />
                                </Telerik:RadPageView>
                                <Telerik:RadPageView runat="server" ID="TelRadPageVwStateManagement">
                                    <ctrl:StudentStateManagementView ID="ctrlStudentStateManagementView" runat="server" />
                                </Telerik:RadPageView>
                            </Telerik:RadMultiPage>
                        </Telerik:RadPane>
                    </Telerik:RadSplitter>

                </div>
                <div id="divRepActivities">
                    <ctrl:RepActivitiesView ID="ctrlRepActivitiesView" runat="server" />
                </div>
            </div>
        </Telerik:RadPane>
    </Telerik:RadSplitter>
</div>


        <Telerik:RadWindow ID="TelRadWindowAddLead" runat="server" Modal="true" AutoSize="False" Behaviors="None"
             Height="750" Width="550" Title="Lead Insert">
            <contenttemplate>
                <ctrl:LeadInsertView ID="ctrlLeadInsertView" runat="server" />
            </contenttemplate>
        </Telerik:RadWindow>

        <Telerik:RadWindow ID="AddActivityWIndow" runat="server" Modal="true" AutoSize="False" Behaviors="Close"
             Height="750" Width="600" ReloadOnShow="true">
            <ContentTemplate>
                <ctrl:AddEditActivityView ID="ctrlAddEditActivityView" runat="server" />
            </ContentTemplate>
        </Telerik:RadWindow>
</div>

Here is the code behind (ViewInitializer.ascx.cs) It's slimed down some to focus on the problem..

    public partial class SaliViewInitializer : System.Web.UI.UserControl
    {

        public void AjaxManager_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
                switch (e.Argument)
                {
                    case "InitAddEditActivityForm":

                        AddEditActivityView ctrlAddEditActivityView =
                            (AddEditActivityView)AddActivityWIndow.ContentContainer.FindControl("ctrlAddEditActivityView");

                        ctrlAddEditActivityView.PreformOpenAddActivity(SessionData.Current.User.SelectedStaffId,
                                                                       SelectedStudentId);
                        break;
                }
        }




        private void WireUpAjaxSettings()
        {
            RadAjaxManager AjaxManager = RadAjaxManager.GetCurrent(Page);
            AddEditActivityView ctrlAddEditActivityView = (AddEditActivityView)AddActivityWIndow.ContentContainer.FindControl("ctrlAddEditActivityView");
            Panel pnlAddEditActivity = (Panel)ctrlAddEditActivityView.FindControl("pnlAddEditActivity");
            RadAjaxLoadingPanel lpnAddEditActivity = (RadAjaxLoadingPanel)ctrlAddEditActivityView.FindControl("lpnAddEditActivity");
            RadToolBar StudentActivitiesToolBar = (RadToolBar)ctrlStudentActivitiesView.FindControl("StudentActivitiesToolBar");
            AjaxManager.AjaxSettings.AddAjaxSetting(StudentActivitiesToolBar, pnlAddEditActivity, lpnAddEditActivity);

        }


        protected void Page_Load(object sender, EventArgs e)
        {

            if (SessionData.Current.User == null)
            {
                IStaffRepository staffRepo = RepositoryProvider.GetRepository<IStaffRepository>();
                SessionData.Current.User = staffRepo.GetUserByAccountName(Environment.UserName);
            }
        }


        protected void Page_Init(object sender, EventArgs e)
        {
            RadAjaxManager AjaxManager = new RadAjaxManager();
            AjaxManager.ID = "SaliRadAjaxManager";
            AjaxManager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(AjaxManager_AjaxRequest);
            Page.Controls.Add(AjaxManager);

            ctrlStudentSearchView.StudentSelected += new EventHandler<SelectStudentEventArgs>(ctrlStudentSearchView_StudentSelected);
        }

        protected void Page_PreRender(object sender, EventArgs e)
        {
            WireUpAjaxSettings();

            if (!Page.IsPostBack)
            {
                if (SessionData.Current.User.Roles.Contains(UserRoles.Administrator))
                {
                    ILookUpRepository lookupRepo = RepositoryProvider.GetRepository<ILookUpRepository>();
                    RadToolBarItem textItem = TelRadToolBarAdmin.FindItemByText("Rep Select");
                    RadComboBox ddlAdminSelectRep = (RadComboBox)textItem.FindControl("ddlAdminSelectRep");
                    ddlAdminSelectRep.Visible = true;
                    ddlAdminSelectRep.DataSource = lookupRepo.GetNonAdminRemingtonStaff();
                    ddlAdminSelectRep.DataValueField = "Id";
                    ddlAdminSelectRep.DataTextField = "Code";
                    ddlAdminSelectRep.DataBind();
                    RadComboBoxItem li = new RadComboBoxItem(SessionData.Current.User.UserName, SessionData.Current.User.StaffId.ToString());
                    ddlAdminSelectRep.Items.Insert(0, li);
                    ddlAdminSelectRep.SelectedIndex = 0;
                }

                if (!Page.ClientScript.IsStartupScriptRegistered("Init"))
                {

                    Page.ClientScript.RegisterStartupScript
                        (this.GetType(), "Init", "Init();", true);

                }
            }
        }

     }

Now within this user control I have Two other user controls, One trying to update the other. StudentActivitiesView.ascx trying to update AddEditActivitiesView.ascx.

Here is the StudentActivitiesView.ascx

<Telerik:RadAjaxLoadingPanel ID="lpnStudentActivities" runat="server" />

<asp:Panel ID="apnStudentActivities" runat="server">

<Telerik:RadToolBar ID="StudentActivitiesToolBar" RegisterWithScriptManager="true"
                    runat="server" Width="100%" Height="30px" OnClientButtonClicked="StudentActivitiesToolBar_ClickHandler">
                    <Items>
                        <Telerik:RadToolBarButton id="TelRadToolBarBtnAddActivity" Enabled="True" runat="server"
                            Text="Add Activity" CommandName="AddActivity">
                        </Telerik:RadToolBarButton>
                    </Items>
                </Telerik:RadToolBar>


<Telerik:RadGrid RegisterWithScriptManager="true" AllowPaging="true" AllowSorting="true"
    ID="TelRadGridActivities" OnNeedDataSource="TelRadGridActivities_OnNeedDtaSrc"
    PageSize="4" VirtualItemCount="4" AutoGenerateColumns="false" runat="server"
    Width="100%" Height="69">

           Grid COde Here....

</Telerik:RadGrid>
</asp:Panel>

AddEditActivitiesView.ascx

<Telerik:RadAjaxLoadingPanel ID="lpnAddEditActivity" runat="server" />
<asp:Panel ID="pnlAddEditActivity" runat="server">
<center>
        <div class="ModalWindowPanel">
            Long form for editing activities goes here......
        </div>
</center>
</asp:Panel>

SO what is supposed to happen is when StudentActivitiesToolBar is clicked it fires OnClientButtonClicked="StudentActivitiesToolBar_ClickHandler" in ViewInitializer.ascx, then StudentActivitiesToolBar_ClickHandler, opens the the rad window and makes an AjaxRequest to AjaxManager_AjaxRequest where it fires off ctrlAddEditActivityView.PreformOpenAddActivity which is supposed to set the form up for adding or editing an activity. This is how I am passing parameters to the UserControl.

I have got to the point where I have the client click event running the severside code to populate the form using the needed parameters but I can't get the form to refresh with the new data.

At first I had the AjaxManager in the ViewInitializer.ascx Control, and was able to get as far as running the server side code in the UserControl but I could not get the control to refresh and Loading panel to display. I then tried the AjaxManagerProxy and could not get that to work, Then I read in a thread that YOu should not use RadAjaxPanels with the AjaxManager so I changed them to asp:Panels, still could not get it to work. I then tried declaring the AjaxSetting in the CodeBehind of the ViewInitializer.ascx control and was unsuccessful there too. I was getting a null reference exception on the ajax manager when trying to Call AjaxManager.AddAjaxSetting. I then read that in a User control that The AjaxManager Has to be Declaired in the OnInit Method programmatically, and that the Ajax Settings have to be applied in the PreRender Event; This in now causing me problems when Trying to do this $find("<%= RadAjaxManager.ClientID %>"); .

   I am sure that I just have to be missing a few key concepts as they apply to this scenario, There seem to be several approaches and that apply to various situations and I'm not sure exactly how to go about it at this point. If anyone can help, myself and the folks at Remington College would be super grateful.

Thanks,

-Adam

[Iana Tsolova]

Hi Adam,

I reviewed the provided information and here are my findings:

    - When you want a control to updated after a manual ajax request invoked by calling the ajaxRequest() client-side method of the RadAjaxManager, then you need to add an ajax setting where the manager itself updates the particular control. If the manager is not on the same page, you can add the setting dynamically ad below:

protected void Page_PrePender(object sender, EventArgs e)
{
    RadAjaxManager manager = RadAjaxManager.GetCurrent(Page);
    manager.AjaxSettings.AddAjaxSetting(manager, MyControl, RadAjaxLoadingPanel1);
}

    - To get reference of the client object of the manager in case the RadAjaxManager is not on the same page/user control, you can use the below javascript:

var manager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");

 
Give it a try and let me know how it goes.

Greetings,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.