Loading panel not displayed when event fires from user control

[Kunal Vora]

Hi,

I am using a RadTabStrip on an ASP.Net page, which has 4 tabs. Each of these tabs contain different user controls which in turn contain other web user controls. I have place the entire RadTabStrip and its corresponding RadMultipage in one panel. Now when any event gets fired from a grid of the user control in any of the tabs, it does not display a Loading panel; although the events fire properly and the page is updated.

On this page, there is a RadGrid which gets updated by an event from the user control (which is in a RadMultipage), and the grid in turn updates other user controls which are in other tabs and RadMultipages.

Note that the usercontrols are not added dynamically, they exist when the page is loaded. RadTabStrip, RadTab and multipage controls are placed in either asp:panels or div. So giving the controls another dynamic IDs does not seem to work.

Also, the page uses an AjaxManagerProxy control since the AjaxManager itself is used in the master page. Because it uses an AjaxManagerProxy control, I cannot explicitly display the loading panels through JavaScript since I cannot find OnRequestStart and OnResponseEnd in the proxy control's client settings.

Can you please guide me with an alternative way of achieving this? Or if I am missing something? I am not sure whether to keep the tab content in a seperate panel and give that ID in "UpdatedControl" in the Ajax Settings or give the entire panel as the "UpdatedControl". I've tried both: functionalities work in both cases but loading panel gets displayed in none.

Please help,

Thanks in advance

Kunal Vora
Software Developer
Logica UK Ltd.
London, England

[Pavlina]

Hi Kunal,

Please review the below articles for further information about loading user controls with ajax and RadAjax with UserControls:

http://www.telerik.com/help/aspnet-ajax/ajxusercontrols.html
http://www.telerik.com/help/aspnet-ajax/ajxloadusercontrols.html
http://www.telerik.com/help/aspnet-ajax/ajax-manager-proxy.html
http://demos.telerik.com/aspnet-ajax/Ajax/Examples/Common/LoadingUserControls/DefaultCS.aspx

Check it out and let me know if other questions arise.

All the best,
Pavlina
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.

[Heikki Heikkinen]

I had the same kind of problem in my proof of concept case.
I was trying to demo MVP (Model-View-Presenter) implementation where Views on the web user interface level are implemented as user controls and they implement the View interface.
There was a need to make a request coming from one view (user controls) to update other views(user controls) so that the views themselves would not have to know anything about each other. This was achieved with an application controller that was the same instance to all presenters on the page.

Of course some coupling would have to be done on the page that contains all the views. In this example that only coupling is done with the RadAjaxManager. Here the selection of one row in the list view would make the details of that row to appear on the detail view.

I have the following markup on my content page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SomeDomain.GenericReference.Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register src="~/GenericReference/Views/ModelListView.ascx" tagname="ModelListView" tagprefix="uc1" %>

<%@ Register src="Views/ModelDetailView.ascx" tagname="ModelDetailView" tagprefix="uc2" %>


<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
        DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ModelListView1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="PanelDetail" LoadingPanelID="RadAjaxLoadingPanel2" />
                    <telerik:AjaxUpdatedControl ControlID="PanelList" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ModelDetailView1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="PanelDetail" LoadingPanelID="RadAjaxLoadingPanel2" />
                    <telerik:AjaxUpdatedControl ControlID="PanelList" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnRequestStart="requestStart" OnResponseEnd="requestEnd" />
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"
        Skin="Office2007">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server"
        Skin="Vista">
    </telerik:RadAjaxLoadingPanel>
    <asp:Panel ID="Panel1" runat="server">
    </asp:Panel>
    <asp:Panel ID="PanelList" runat="server">


            <uc1:ModelListView ID="ModelListView1" runat="server" />



    </asp:Panel>

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


            <uc2:ModelDetailView ID="ModelDetailView1" runat="server" />



    </asp:Panel>

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

            function requestStart(sender, eventArgs) {
                var manager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");

                for (var j = 0; j < manager._ajaxSettings.length; j++) {
                    if (manager._ajaxSettings[j].InitControlID == eventArgs.EventArgument) {
                        for (var i = 0; i < manager._ajaxSettings[j].UpdatedControls.length; i++) {
                            var ctrl = manager._ajaxSettings[j].UpdatedControls[i].ControlID;
                            var panelID = manager._ajaxSettings[j].UpdatedControls[i].PanelID;
                            if(panelID == undefined || panelID == null || panelID == ""){
                                panelID = manager._defaultLoadingPanelID;
                            }
                            var lpanel = $find(panelID);
                            if(lpanel != null){
                                lpanel.show(ctrl);
                            }

                        }
                        break;
                    }
                }
            }

            function requestEnd(sender, eventArgs) {
                var manager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");

                for (var j = 0; j < manager._ajaxSettings.length; j++) {
                    if (manager._ajaxSettings[j].InitControlID == eventArgs.EventArgument) {
                        for (var i = 0; i < manager._ajaxSettings[j].UpdatedControls.length; i++) {
                            var ctrl = manager._ajaxSettings[j].UpdatedControls[i].ControlID;
                            var panelID = manager._ajaxSettings[j].UpdatedControls[i].PanelID;
                            if(panelID == undefined || panelID == null || panelID == ""){
                                panelID = manager._defaultLoadingPanelID;
                            }
                            var lpanel = $find(panelID);
                            if(lpanel != null){
                                lpanel.hide(ctrl);
                            }

                        }
                        break;
                    }
                }
            }

        </script>
    </telerik:RadCodeBlock>
</asp:Content>

The JavaScript probably would not be in the markup in real life, but for now it will do.

The markup in the ModelListView is following:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ModelListView.ascx.cs" Inherits="SomeDomain.GenericReference.Views.ModelListView" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False"
        onitemcommand="RadGrid1_ItemCommand" onitemdatabound="RadGrid1_ItemDataBound" >

        <ClientSettings>
            <ClientEvents OnCommand="func" />
        </ClientSettings>

        <MasterTableView DataKeyNames="Identity">
            <Columns>
                <telerik:GridButtonColumn CommandName="Select" Text="Select" UniqueName="Select">
                </telerik:GridButtonColumn>
                <telerik:GridTemplateColumn UniqueName="ID" HeaderText="ID">
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn UniqueName="Foo" HeaderText="Foo">
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn UniqueName="Bar" HeaderText="bar">
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

    <script type="text/javascript">

        function func(sender, eventAtgs) {
            var manager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
            manager.ajaxRequest("<%=this.ClientID %>");
            return false;
        }

    </script>

</telerik:RadCodeBlock>

The ModelListView and ModelDetailView are user controls and were updated just fine by the RadAjaxManager but the loading panel didn't show. Maybe this has something to do with the fact that the RadAjaxManager seems to have some issues with user controls, for example the configuration tool doesn't recognize them.

The way that the sender (ModelListView) of the event is sent to the RadAjaxManager's OnRequestStart is by setting the EventArgument as the ClientID of ModelListView in the ajaxRequest call.

This is not a perfect solution. The custom JavaScript has a smell and this all should be automated. I'm not sure if this would work if the views weren't user controls. But at least this is one way to get the loading panels to show with events from user controls.

EDIT: Getting LoadingPanelIDs from ajaxsetting in JS.

Note: And if you don't like repeating yourself and want to go dynamic with the JS, you can abstract the requestStart and requestEnd functions like so:

function requestStart(sender, eventArgs) {
    toggleLoadingPanels(eventArgs.EventArgument, "show");
}

function requestEnd(sender, eventArgs) {
    toggleLoadingPanels(eventArgs.EventArgument, "hide");
}

function toggleLoadingPanels(senderID, operation) {
    var manager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");

    for (var j = 0; j < manager._ajaxSettings.length; j++) {
        if (manager._ajaxSettings[j].InitControlID == senderID) {
            for (var i = 0; i < manager._ajaxSettings[j].UpdatedControls.length; i++) {
                var ctrl = manager._ajaxSettings[j].UpdatedControls[i].ControlID;
                var panelID = manager._ajaxSettings[j].UpdatedControls[i].PanelID;
                if (panelID == undefined || panelID == null || panelID == "") {
                    panelID = manager._defaultLoadingPanelID;
                }
                var lpanel = $find(panelID);
                if (lpanel != null && lpanel[operation] != undefined) {
                    lpanel[operation](ctrl);
                }

            }
            break;
        }
    }
}

[Lenny_shp]

        <div id="divPlaceHolder" runat="server" class="divSection">
           <asp:PlaceHolder ID="myPlaceHolder" runat="server"></asp:PlaceHolder>
        </div>