Loading Panel Keeps Loading after firing cancel command

3 posts, 0 answers
  1. Rasheed
    Rasheed avatar
    32 posts
    Member since:
    Jan 2012

    Posted 20 Jan 2012 Link to this post

    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
  2. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 20 Jan 2012 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rasheed
    Rasheed avatar
    32 posts
    Member since:
    Jan 2012

    Posted 20 Jan 2012 Link to this post

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