Loading Panel Keeps Loading after firing cancel command

[Rasheed]

hi 
i have a content page and a RadGrid within it, edit form template implemented, loading panel and rad ajax manager.
when i click the edit button, a popup template form viewed, when i click the cancel button "sometimes" loading panel keeps loading and sometimes everything is OK, also i've tried to implement hide and show the loading panel explicitly using the JavaScript code  
snippet in the Telerik documentation website, script manager is defined at master page.
i've tested this page hundreds i hope to find a solution.

please help, thanks

[Abhishek]

Hello Rasheed,

I am not sure but i think there may be RadAjaxManager problem. Can you able to post your code here to get exact solution for your problem till then please have a close look on this link.
Ref: http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/popupeditform/defaultcs.aspx



Thanks,
Abhishek K

[Rasheed]

sorry for late here is my grid 

<script type="text/javascript">

    var popUp;

    function PopUpShowing(sender, eventArgs) {

        popUp = eventArgs.get_popUp();

        var gridWidth = sender.get_element().offsetWidth;

        var gridHeight = sender.get_element().offsetHeight;

        var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));

        var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));

        popUp.style.left = ((gridWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px";

        var PopUpTopStyle = 5;

        popUp.style.top = PopUpTopStyle.toString() + "px";

    }

 

    function OnClientCommandExecuting(editor, args) {

        //If commandName is Bold - then cancel execution

        if ("ToggleScreenMode" == args.get_commandName())

            args.set_cancel(true);

    }

 

</script>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

    <script type="text/javascript">

        var currentLoadingPanel = null;

        var currentUpdatedControl = null;

        function RequestStart(sender, args) {

            currentLoadingPanel = $find("<%= RadAjaxLoadingPanel.ClientID %>");

 

            if (args.get_eventTarget() == "<%= RadGridConferences.UniqueID %>") {

                currentUpdatedControl = "<%= RadGridConferences.ClientID %>";

            }

            //show the loading panel over the updated control

            currentLoadingPanel.show(currentUpdatedControl);

        }

        function ResponseEnd() {

            //hide the loading panel and clean up the global variables

            if (currentLoadingPanel != null) {

                currentLoadingPanel.hide(currentUpdatedControl);

            }

            currentUpdatedControl = null;

            currentLoadingPanel = null;

        }

    </script>

</telerik:RadCodeBlock>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" Skin="WebBlue">

</telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="RadGridConferences" runat="server" Skin="WebBlue" AllowPaging="true"

    AutoGenerateColumns="false" PageSize="15" Width="100%" CellSpacing="0" OnEditCommand="RadGrid1_EditCommand"

    OnItemDataBound="RadGrid1_ItemDataBound" OnNeedDataSource="RadGridConferences_NeedDataSource">

    <MasterTableView Width="100%" CellSpacing="0" CommandItemDisplay="TopAndBottom" EditMode="PopUp">

        <EditFormSettings EditFormType="Template" PopUpSettings-Width="600px" PopUpSettings-Height="620px">

            <FormTemplate>

                <div>

                    <div>

                        <p id="PopUpTitle">

                            <%#(Container is GridEditFormInsertItem)? "Add New Conference" : "Update Existing Conference" %>

                        </p>

                    </div>

                    <div>

                        <asp:Label ID="lblConferenceSubject" CssClass="Conferencelbl" runat="server" Text="Conference Subject: "></asp:Label>

                        <asp:TextBox ID="txtConferenceSubject" CssClass="ConferenceBox" runat="server" Text='<%# Bind("ConferenceSubject") %>'></asp:TextBox>

                    </div>

                    <div>

                        <asp:Label ID="lblConferneceLocation" CssClass="Conferencelbl" runat="server" Text="Conference Location: "></asp:Label>

                        <asp:TextBox ID="txtConferneceLocation" CssClass="ConferenceBox" runat="server" Text='<%# Bind("ConferenceLocation") %>'></asp:TextBox>

                    </div>

                    <asp:Panel ID="InsertNewItemsPanel" runat="server" Visible="true">

                        <asp:Label ID="lblInsertNewImage" CssClass="Conferencelbl" runat="server" Text="Upload Conference Image: "></asp:Label>

                        <telerik:RadAsyncUpload ID="RadAsyncConferenceImageUpload" runat="server" MaxFileInputsCount="1"

                            AllowedFileExtensions="jpg,jpeg,png,gif" Skin="WebBlue" ToolTip="Upload Conference Image">

                        </telerik:RadAsyncUpload>

                    </asp:Panel>

                    <div>

                        <asp:Label ID="lblConferenceFlashFile" CssClass="Conferencelbl" runat="server" Text="Upload Conference Newsletter: "></asp:Label>

                        <telerik:RadAsyncUpload ID="RadAsyncConferenceFlashFileUpload" runat="server" MaxFileInputsCount="1"

                            AllowedFileExtensions="exe" Skin="WebBlue" ToolTip="Upload Conference Flash File">

                        </telerik:RadAsyncUpload>

                    </div>

                    <br />

                    <div>

                        <asp:Label ID="lblConferneceImage" CssClass="Conferencelbl" runat="server" Text="Conference Image: "></asp:Label>

                        <asp:Image ID="ConferenceImage" CssClass="ConferenceImage" runat="server" ImageUrl="~/images/DSC_0029.JPG" />

                    </div>

                    <div>

                        <telerik:RadEditor ID="RadEditorConferenceTxtBody" runat="server" EditModes="Design"

                            NewLineMode="Div" Height="250px" ToolTip="Text Area" Width="100%" ContentAreaMode="Div"

                            BorderWidth="0px" EnableResize="False" Skin="WebBlue" OnClientCommandExecuting="OnClientCommandExecuting">

                            <Tools>

                                <telerik:EditorToolGroup Tag="MainToolbar">

                                    <telerik:EditorTool Name="Save" />

                                    <telerik:EditorTool Name="FindAndReplace" ShortCut="CTRL+F" />

                                    <telerik:EditorTool Name="Cut" />

                                    <telerik:EditorTool Name="Copy" ShortCut="CTRL+C" />

                                    <telerik:EditorTool Name="Paste" ShortCut="CTRL+V" />

                                    <telerik:EditorTool Name="PasteStrip" />

                                    <telerik:EditorTool Name="Undo" ShortCut="CTRL+Z" />

                                    <telerik:EditorTool Name="Redo" ShortCut="CTRL+Y" />

                                    <telerik:EditorTool Name="FontName" ShortCut="CTRL+SHIFT+F" />

                                    <telerik:EditorTool Name="RealFontSize" ShortCut="CTRL+SHIFT+P" />

                                    <telerik:EditorTool Name="ForeColor" />

                                    <telerik:EditorTool Name="BackColor" />

                                    <telerik:EditorTool Name="Zoom" />

                                    <telerik:EditorTool Name="ConvertToLower" />

                                    <telerik:EditorTool Name="ConvertToUpper" />

                                </telerik:EditorToolGroup>

                                <telerik:EditorToolGroup>

                                    <telerik:EditorTool Name="SelectAll" ShortCut="CTRL+A" />

                                    <telerik:EditorTool Name="Bold" ShortCut="CTRL+B" />

                                    <telerik:EditorTool Name="Italic" ShortCut="CTRL+I" />

                                    <telerik:EditorTool Name="Underline" ShortCut="CTRL+U" />

                                    <telerik:EditorTool Name="StrikeThrough" />

                                    <telerik:EditorTool Name="JustifyLeft" />

                                    <telerik:EditorTool Name="JustifyCenter" />

                                    <telerik:EditorTool Name="JustifyRight" />

                                    <telerik:EditorTool Name="JustifyFull" />

                                    <telerik:EditorTool Name="JustifyNone" />

                                    <telerik:EditorTool Name="Indent" />

                                    <telerik:EditorTool Name="Outdent" />

                                    <telerik:EditorTool Name="InsertOrderedList" />

                                    <telerik:EditorTool Name="InsertUnorderedList" />

                                    <telerik:EditorTool Name="InsertTable" />

                                    <telerik:EditorTool Name="InsertHorizontalRule" />

                                    <telerik:EditorTool Name="InsertDate" />

                                    <telerik:EditorTool Name="InsertTime" />

                                    <telerik:EditorTool Name="InsertParagraph" />

                                    <telerik:EditorTool Name="InsertSymbol" />

                                </telerik:EditorToolGroup>

                            </Tools>

                        </telerik:RadEditor>

                    </div>

                    <div>

                        <asp:ImageButton ID="btnInsert" runat="server" ImageUrl="~/Administration/images/ok.gif"

                            ToolTip='<%#(Container is GridEditFormInsertItem) ? "Add New Conference" : "Update Existing Conference" %>'

                            CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' />

                        <asp:ImageButton ID="btnCancel" runat="server" ImageUrl="~/Administration/images/cancel.gif"

                            ToolTip="Cancel" CausesValidation="false" CommandName="Cancel" />

                    </div>

                </div>

            </FormTemplate>

        </EditFormSettings>

        <Columns>

            <telerik:GridEditCommandColumn ButtonType="ImageButton">

            </telerik:GridEditCommandColumn>

            <telerik:GridBoundColumn HeaderText="Conference Subject" DataField="ConferenceSubject"

                DataType="System.String" UniqueName="ConferenceSubject" SortExpression="ConferenceSubject">

            </telerik:GridBoundColumn>

        </Columns>

    </MasterTableView>

    <ClientSettings>

        <ClientEvents OnPopUpShowing="PopUpShowing" />

    </ClientSettings>

</telerik:RadGrid>

<telerik:RadAjaxManager runat="server" EnablePageHeadUpdate="true" EnableAJAX="true">

    <AjaxSettings>

        <telerik:AjaxSetting AjaxControlID="RadGridConferences">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="RadGridConferences" LoadingPanelID="RadAjaxLoadingPanel"

                    UpdatePanelHeight="100%" />

            </UpdatedControls>

        </telerik:AjaxSetting>

    </AjaxSettings>

    <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />

</telerik:RadAjaxManager>


code behind if you need it:

protected void RadGridConferences_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            if (!Page.IsPostBack)
            {
                RadGridConferences.DataSource = DB.getAllConferences();
                Session["RadGridConferences"] = DB.getAllConferences();
            }
            else
            {
                if (Session["RadGridConferences"] != null)
                    RadGridConferences.DataSource = Session["RadGridConferences"];
                else
                {
                    RadGridConferences.DataSource = DB.getAllConferences();
                    Session["RadGridConferences"] = DB.getAllConferences();
                }
            }
        }

Thanks