This is a migrated thread and some comments may be shown as answers.

Ajax panel shows up in wrong place for first postback

4 Answers 57 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
bdrennen
Top achievements
Rank 1
bdrennen asked on 01 Oct 2010, 07:26 PM
I'm having an odd problem with our Ajax loading panel. It's showing up in the wrong place on the page--it loads in the top left corner, where it pushes then entire contents of the page down. This only happens if the page forward button on the RadGrid is the first control clicked right after the page is loaded. All subsequent postbacks have the loading panel appearing in the right spot, which is centered on the page. Also, if you click any other control on the page first (the RadPanelBar, any of the filter controls), the loading panel appears in the right spot and always in the right spot.

The loading panel is part of the site's master page. The page I'm having this problem on has just a single user control on it, which loads a RadPanelBar and a RadGrid on the page. I've included how that's set up below:

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadPanelBar1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" UpdatePanelRenderMode="block" />
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                <telerik:AjaxUpdatedControl ControlID="RadFilter1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadFilter1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadFilter1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
 
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td width="240" valign="top">
    <telerik:RadPanelBar runat="server" ID="RadPanelBar1" DataSourceID="SqlDataSource1"
        DataFieldParentID="parent_ID" DataTextField="text" DataValueField="ID"
        AllowCollapseAllItems="True" ExpandMode="SingleExpandedItem" CollapseAnimation-Type="None" ExpandAnimation-Type="None"
        OnItemClick="RadPanelBar1_ItemClick" CausesValidation="false"
        Skin="Windows7" Width="240">
    </telerik:RadPanelBar>
</td>
<td width="*" valign="top">
    <telerik:RadFilter runat="server" ID="RadFilter1" FilterContainerID="RadGrid1"
        ShowApplyButton = "false">
    </telerik:RadFilter>
 
    <telerik:RadGrid runat="server" ID="RadGrid1" DataSourceID="SqlDataSource2"
        AllowPaging="True" AutoGenerateColumns="false" AllowSorting="true"
         OnItemCommand="RadGrid1_ItemCommand">
        <GroupingSettings CaseSensitive="false" />
        <ClientSettings AllowColumnsReorder="True" ColumnsReorderMethod="Reorder">
            <Scrolling AllowScroll="False" UseStaticHeaders="True" />
        </ClientSettings>
        <MasterTableView IsFilterItemExpanded="false" CommandItemDisplay="Top" PageSize="20">
            <CommandItemTemplate>
                <table cellpadding="0" cellspacing="5px" width="100%"><tbody><tr>
                    <td style="width: 15ex;">
                        <asp:LinkButton ID="lbApplyFilter" runat="server"
                            CausesValidation="false" CommandName="FilterRadGrid"
                            CssClass="gridToolButton" ToolTip="Click to apply filter settings">
                            <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Icons/filter.gif" />
                            <asp:Label ID="Label1" runat="server" Text="Apply Filter" />
                        </asp:LinkButton>
                    </td>
                    <td style="width: auto;"><div style="width: 100%;"><!-- --></div></td>
                    <td style="width: 10ex;">
                        <asp:LinkButton ID="LinkButton1" runat="server"
                            CssClass="gridToolButton" OnClientClick="return false;">
                            <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/Icons/16x16/Save.png" />
                            <asp:Label ID="Label4" runat="server" Text="Save" />
                        </asp:LinkButton>
                        <telerik:RadToolTip ID="RadToolTip1" runat="server"
                            AutoCloseDelay="0" EnableAjaxSkinRendering="True"
                            Height="150" RelativeTo="Element" ShowDelay="0"
                            ShowEvent="OnClick" OnClientBeforeShow="OnClientBeforeShow"
                            TargetControlID="LinkButton1" Width="400">
                            <uc2:saveDialog ID="saveDialog1" runat="server" />
                        </telerik:RadToolTip>
                    </td>
                    <td style="width: 15ex;">
                        <asp:LinkButton ID="lbDownloadExcel" runat="server"
                            CausesValidation="false" CommandName="ExportToCSV"
                            CssClass="gridToolButton"
                            ToolTip="Click to export current student discovery body to Excel">
                            <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Icons/excel_icon.png" />
                            <asp:Label ID="Label2" runat="server" Text="Export Excel" />
                        </asp:LinkButton>
                    </td>
                </tr></tbody></table>
            </CommandItemTemplate>
        </MasterTableView>
        <HeaderContextMenu EnableAutoScroll="True">
        </HeaderContextMenu>
    </telerik:RadGrid>
</td>
</tr>
</table>

There's a bit of fiddling about going on in the codebehind, but that's all logic related to setting up the data sources for the panel bar and the grid. There's not much else to the page. Any idea why the loading panel is behaving like this?

Thank you!

Bryan

4 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 04 Oct 2010, 02:33 PM
Hi Bryan,

I would suggest you to explicitly point the LoadingPanel to the center of the page on each Ajax request. Please refer to the following help topic which elaborates on this matter.


Regards,
Maria Ilieva
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
0
Maria Ilieva
Telerik team
answered on 04 Oct 2010, 02:33 PM
Hi Bryan,

I would suggest you to explicitly point the LoadingPanel to the center of the page on each Ajax request. Please refer to the following help topic which elaborates on this matter.


Regards,
Maria Ilieva
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
0
bdrennen
Top achievements
Rank 1
answered on 04 Oct 2010, 05:51 PM

Maria:

The loading panel is centered on the page using the code from your linked example. Here's how the RadAjaxManager and loading panel are declared on the Master Page:

<telerik:RadAjaxManager ID="myAjaxManager" runat="server" UpdatePanelsRenderMode="Inline" EnableAJAX="true" DefaultLoadingPanelID="lpLoadingPanel1"
    <ClientEvents OnRequestStart="HSD_onRequestStart" />
</telerik:RadAjaxManager
  
<telerik:RadAjaxLoadingPanel ID="lpLoadingPanel1" runat="server" HorizontalAlign="Center" IsSticky="true" Width="200" Height="150" EnableAjaxSkinRendering="true" MinDisplayTime="250" Transparency="5">
</
telerik:RadAjaxLoadingPanel>

HSD_onRequestStart contains the JavaScript that centers the loading panel. Since it's the same as in the example, I didn't include it here.

In every instance but this one, this works just fine--the loading panel appears centered in the middle of the page during an Ajax postback. However, on just this page, when the first postback is kicked off by the RadGrid's pager button, the loading panel appears in the top left corner. Every other postback on the page from any control (including the pager buttons) has the loading panel appear centered on the page after that first postback. Very odd. It's almost like the pager on the grid doesn't isn't using the Master Page's loading panel on that one postback... Is the grid using its own Ajax manager to do that first postback somehow?

Thank you,

Bryan

0
Maria Ilieva
Telerik team
answered on 07 Oct 2010, 09:32 AM
Hello Bryan,

The new RadGrid does not contain any axaj settings in ti so the described behavior is rather strange.
As the provided information is not enough to isolate the root cause of the issue you are facing, please prepare a simple, fully runnable reproduction demo, open a new support ticket and send it to us along with very detailed reproduction steps and explanations and we will debug it locally and we will do our best to help.
Thank you for your cooperation.

All the best,
Maria Ilieva
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
Tags
Ajax
Asked by
bdrennen
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
bdrennen
Top achievements
Rank 1
Share this question
or