Loading Panel does not appear on any tab.

[whidbey boy]

When ever we are filtering or doing any operation on UnAssignedTasks, the loading panel does not appear on the tab. It only appears on AssignedTasks tab. Are we doing or missing anything?

Please note that when we switch between the tabs, loading panel appears as expected. The only issue is within the unassignedTasks tabs where the loading panel is not shown when performing any action within that user control.

<%@ Page Language="C#" MasterPageFile="~/Platform/Interface/Default.master" AutoEventWireup="true"
    CodeFile="ConsolidatedView.aspx.cs" Inherits="Interface_PendingTask_ConsolidatedView"
    Title="" %>

<%@ Register Src="~/WebControls/PendingTask/Tasks.ascx" TagName="Tasks" TagPrefix="rei" %>
<%@ Register Src="~/WebControls/PendingTask/TaskDetails.ascx" TagName="TaskDetails"
    TagPrefix="rei" %>
<asp:Content ID="Content1" ContentPlaceHolderID="headContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <rei:REIRadAjaxManagerProxy ID="rampPendingTasks" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="lnkViewType">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlTaskHeader" LoadingPanelID="TaskLoadingPanel" />


                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="rtsTasks">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlTasks" LoadingPanelID="TaskLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
<%--            <telerik:AjaxSetting AjaxControlID="reiSearchPanel">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlTaskHeader" LoadingPanelID="TaskLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>--%>
            <telerik:AjaxSetting AjaxControlID="UnAssignedTasks">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlTasks" LoadingPanelID="TaskLoadingPanel" />


                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </rei:REIRadAjaxManagerProxy>
    <rei:REIRadAjaxLoadingPanel ID="TaskLoadingPanel" runat="server">
    </rei:REIRadAjaxLoadingPanel>
    <telerik:RadCodeBlock runat="server" ID="rdCodeBlock">

        <script language="javascript" type="text/javascript">
         function OnClientItemChecked(sender, eventArgs)
         {
            var lstBoxControl;
            lstBoxControl = $find(sender.get_id());
            var items = lstBoxControl.get_items();
            if(eventArgs.get_item().get_index() == 0)
            {
                var firstIndex = eventArgs.get_item().get_checked();
                for(var i=0;i<lstBoxControl.get_items().get_count();i++)
                {

                    items.getItem(i).set_checked(firstIndex);
                }
            }
            else
            {
                   items.getItem(0).set_checked(false);
            }
         }
        </script>

    </telerik:RadCodeBlock>
    <rei:REISearchPanel ID="reiSearchPanel" runat="server" ValidationGroup="ValGroupSearchDates">
        <rei:BasicSearchPanel ID="BasicSearchPanel" runat="server">
            <table width="100%" border="0" class="module_tb" summary="Basic Search Filters">
                <tr>
                    <td width="12%" scope="row">
                        <rei:REIASPLabel ID="lblTrackingNumber" runat="server" Text="Tracking #" />
                    </td>
                    <td width="28%">
                        <rei:REIASPTextBox ID="txtTrackingNumber" runat="server" MaxLength="20" Width="150px" />
                    </td>
                    <td width="12%" valign="middle">
                        <rei:REIASPLabel ID="lblRole" runat="server" Text="Role" />
                    </td>
                    <td width="48%">
                        <rei:REIRadListBox ID="lstRole" EnableEmbeddedSkins="false" CheckBoxes="true" SelectionMode="Multiple"
                            Width="250px" Height="70px" runat="server" OnClientItemChecked="OnClientItemChecked">
                        </rei:REIRadListBox>
                    </td>
                </tr>
                <tr>
                    <td width="12%" scope="row" valign="middle">
                        <rei:REIASPLabel ID="lblDocument" runat="server" Text="Document" />
                    </td>
                    <td width="48%" class="searchvertalign">
                        <rei:REIRadListBox ID="lstDocument" EnableEmbeddedSkins="false" CheckBoxes="true"
                            Width="250px" Height="70px" SelectionMode="Multiple" runat="server" OnClientItemChecked="OnClientItemChecked">
                        </rei:REIRadListBox>
                    </td>
                    <td width="12%" valign="middle">
                        <rei:REIASPLabel ID="lblTask" runat="server" Text="Task" />
                    </td>
                    <td width="48%">
                        <rei:REIRadListBox ID="lstTasks" EnableEmbeddedSkins="false" CheckBoxes="true" SelectionMode="Multiple"
                            Width="250px" Height="70px" runat="server" OnClientItemChecked="OnClientItemChecked">
                        </rei:REIRadListBox>
                    </td>
                </tr>
                <tr>
                    <td width="12%" valign="middle" scope="row">
                        <rei:REIASPLabel ID="lblStatus" runat="server" Text="Status" />
                    </td>
                    <td width="48%" class="searchvertalign">
                        <rei:REIRadListBox ID="lstStatus" EnableEmbeddedSkins="false" CheckBoxes="true" SelectionMode="Multiple"
                            Width="250px" Height="70px" runat="server" OnClientItemChecked="OnClientItemChecked">
                        </rei:REIRadListBox>
                    </td>
                    <td width="12%">
                        <rei:REIASPLabel ID="lblDisplayView" runat="server" Text="Display View" />
                    </td>
                    <td width="48%">
                        <rei:REIASPRadioButtonList ID="rbListDisplay" runat="server" RepeatDirection="Horizontal">
                            <asp:ListItem Text="Consolidated" Value="Consolidated" Selected="True" />
                            <asp:ListItem Text="Detailed" Value="Detailed" />
                        </rei:REIASPRadioButtonList>
                    </td>
                </tr>
            </table>
        </rei:BasicSearchPanel>
        <rei:AdvancedSearchPanel ID="AdvancedSearchPanel" runat="server">
            <table width="100%" border="0" class="module_tb" summary="Basic Search Filters">
                <tr>
                    <td width="8%" class="searchvertalign" scope="row">
                        <rei:REIASPLabel ID="lblAssignedDateFrom" runat="server" Text="Assigned On" />
                    </td>
                    <td class="searchvertalign">
                        <rei:REIASPLabel ID="lblDateFrom" runat="server" Text="Between" AssociatedControlID="dpAssignedDateFrom" />
                        <rei:REIRadDatePicker ID="dpAssignedDateFrom" runat="server" Width="100px" EnableEmbeddedSkins="false"
                            Skin="HrsaTheme">
                            <Calendar>
                                <SpecialDays>
                                    <telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="Bisque" />
                                </SpecialDays>
                            </Calendar>
                        </rei:REIRadDatePicker>
                        <rei:REIASPLabel ID="lblAssignedDateTo" runat="server" Text="and" AssociatedControlID="dpAssignedDateTo" />
                        <rei:REIRadDatePicker ID="dpAssignedDateTo" runat="server" Width="100px" EnableEmbeddedSkins="false"
                            Skin="HrsaTheme">
                            <Calendar>
                                <SpecialDays>
                                    <telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="Bisque" />
                                </SpecialDays>
                            </Calendar>
                        </rei:REIRadDatePicker>
                    </td>
                    <td width="8%" class="searchvertalign" scope="row">
                        <rei:REIASPLabel ID="lblCompledOn" runat="server" Text="Completed On" />
                    </td>
                    <td class="searchvertalign">
                        <rei:REIASPLabel ID="lblCompletedDateFrom" runat="server" Text="Between" AssociatedControlID="dpCompletedDateFrom" />
                        <rei:REIRadDatePicker ID="dpCompletedDateFrom" runat="server" Width="100px" EnableEmbeddedSkins="false"
                            Skin="HrsaTheme">
                            <Calendar>
                                <SpecialDays>
                                    <telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="Bisque" />
                                </SpecialDays>
                            </Calendar>
                        </rei:REIRadDatePicker>
                        <rei:REIASPLabel ID="lblCompletedDateTo" runat="server" Text="and" AssociatedControlID="dpCompletedDateTo" />
                        <rei:REIRadDatePicker ID="dpCompletedDateTo" runat="server" Width="100px" EnableEmbeddedSkins="false"
                            Skin="HrsaTheme">
                            <Calendar>
                                <SpecialDays>
                                    <telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="Bisque" />
                                </SpecialDays>
                            </Calendar>
                        </rei:REIRadDatePicker>
                    </td>
                </tr>
            </table>
        </rei:AdvancedSearchPanel>
        <rei:DisplaySearchOptions ID="parsortbyCombo" runat="server" SearchPanelID="reiSearchPanel">
            <Fields>
                <rei:Field Name="Role" Value="RoleAbbr" />
                <rei:Field Name="Document" Value="ProcessName" />
                <rei:Field Name="Task" Value="TaskType" />
            </Fields>
            <SortItems>
                <rei:SortItem DefaultFieldName="Role" DefaultSortOrder="Ascending" />
                <rei:SortItem DefaultFieldName="Document" DefaultSortOrder="Ascending" />
                <rei:SortItem DefaultFieldName="Task" DefaultSortOrder="Descending" />
            </SortItems>
        </rei:DisplaySearchOptions>
    </rei:REISearchPanel>

    <script type="text/javascript">
            showDetailedViewClick.subscribe(function(sender, eventArgs) {
                javascript: __doPostBack('ctl00$MainContent$lnkViewType', '');
            }
        );
    </script>

    <asp:Panel ID="pnlTaskHeader" runat="server">
        <table width="100%">
            <tr>
                <td align="right">
                    <rei:REIASPLinkButton ID="lnkViewType" runat="server" Text="Task Detailed View" Visible="false" />
                </td>
            </tr>
        </table>
        <asp:Panel ID="pnlTasks" runat="server">
            <div class="tabout">
                <div class="tabsstrip">
                    <rei:REIRadTabStrip ID="rtsTasks" runat="server" SelectedIndex="0" Width="100%" BorderStyle="None"
                        OnTabClick="rtsTasks_OnTabClick">
                        <Tabs>
                            <rei:REIRadTab runat="server" Text="Assigned" SelectedIndex="0" />
                            <rei:REIRadTab runat="server" Text="Unassigned" SelectedIndex="1" />
                            <rei:REIRadTab runat="server" Text="Recently Completed" SelectedIndex="2" />
                        </Tabs>
                    </rei:REIRadTabStrip>
                </div>
                <asp:Panel ID="pnlConsolidatedView" runat="server" Visible="false">
                    <div class="tabins">
                        <asp:Panel ID="pnlConsolidatedAssigned" runat="server" Visible="false">
                            <div class="rmpHiddenView">
                                <div id="Div3">
                                    <rei:Tasks ID="AssignedTasks" runat="server" />
                                </div>
                            </div>
                        </asp:Panel>
                        <asp:Panel ID="pnlConsolidatedUnassigned" runat="server" Visible="false">
                            <div class="rmpHiddenView">
                                <div id="Div8">
                                    <rei:Tasks ID="UnAssignedTasks" runat="server" />
                                </div>
                            </div>
                        </asp:Panel>
                        <asp:Panel ID="pnlConsolidatedRecentlyCompleted" runat="server" Visible="false">
                            <div class="rmpHiddenView">
                                <div id="Div11">
                                    <rei:Tasks ID="CompletedTasks" runat="server" />
                                </div>
                            </div>
                        </asp:Panel>
                    </div>
                </asp:Panel>
                <asp:Panel ID="pnlDetailedView" runat="server" Visible="false">
                    <div class="tabins">
                        <asp:Panel ID="pnlDetailedAssigned" runat="server" Visible="false">
                            <div class="rmpHiddenView">
                                <div id="Div5">
                                    <rei:TaskDetails ID="AssignedTaskDetails" runat="server" />
                                </div>
                            </div>
                        </asp:Panel>
                        <asp:Panel ID="pnlDetailedUnassigned" runat="server" Visible="false">
                            <div class="rmpHiddenView">
                                <div id="Div13">
                                    <rei:TaskDetails ID="UnAssignedTaskDetails" runat="server" />
                                </div>
                            </div>
                        </asp:Panel>
                        <asp:Panel ID="pnlDetailedRecentlyCompleted" runat="server" Visible="false">
                            <div class="rmpHiddenView">
                                <div id="Div22">
                                    <rei:TaskDetails ID="CompletedTaskDetails" runat="server" />
                                </div>
                            </div>
                        </asp:Panel>
                    </div>
                </asp:Panel>
            </div>
        </asp:Panel>
    </asp:Panel>
</asp:Content>

[Iana Tsolova]

Hello whidbey,

Can you try setting the Skin proeprty of the RadAjaxLoadingPanel to "Vista" for instance and see how it goes?

Kind regards,
Iana
the Telerik team

[whidbey boy]

HI Iana,

I set the skin property to Vista as shown below

<rei:REIRadAjaxLoadingPanel ID="TaskLoadingPanel" runat="server" Skin="Vista">

Now, I do not see the loading panel at all even when we switch between the tabs.

[whidbey boy]

Just as an note:

I changed the Loading panel markup to use

telerik:RadAjaxLoadingPanel ID="TaskLoadingPanel" runat="server" Skin="Vista">
    </telerik:RadAjaxLoadingPanel>

and after this Loading panel is shown on switching the tabs and assigned tabs as it was happening earlier but not on unassigned Tasks and completed Tasks user controls.

Also, the user control that is shared on all the three tabs has markup like below 

<rei:REIRadAjaxManagerProxy ID="rampTaskSummary" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="grTasks">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="grTasks" LoadingPanelID="lpGrid" />
                <telerik:AjaxUpdatedControl ControlID="ltSortExpr" LoadingPanelID="lpGrid" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</rei:REIRadAjaxManagerProxy>
<telerik:RadAjaxLoadingPanel ID="lpGrid" runat="server" Skin="Vista">
</telerik:RadAjaxLoadingPanel>

[whidbey boy]

Hi Iana,

I tried playing around a bit more and when I am add ajax setting on controls programmatically, it works fine.

Could you please confirm if this is the right approach?

protected void Page_Load(object sender, EventArgs e)
        {
            rampTaskSummary.AjaxSettings.AddAjaxSetting(grTasks, grTasks, lpGrid);
        }

[Iana Tsolova]

Hello whidbey,

In some scenarios, like in yours I assume, when the user controls a loaded dynamically, one needs to add the ajax settings dynamically as well. Therefore I can confirm that the approach you are using is right.

Regards,
Iana
the Telerik team