Ajax panel shows up in wrong place for first postback

5 posts, 0 answers
  1. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 01 Oct 2010 Link to this post

    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
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 04 Oct 2010 Link to this post

    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
  3. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 04 Oct 2010 Link to this post

    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
  4. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 04 Oct 2010 Link to this post

    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

  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 07 Oct 2010 Link to this post

    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
Back to Top