Show loading panel when saving Spreadsheet

Thread is closed for posting
7 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 13 Jun 2017 Link to this post

    Requirements

    Telerik Product and Version

    UI for ASP.NET AJAX 2017 R2

    Supported Browsers and Platforms

    all browsers supported by Telerik UI for ASP.NET AJAX suite

    Components/Widgets used (JS frameworks, etc.)

    RadSpreadsheet, .NET 4.0/4.5 C#/VB

    PROJECT DESCRIPTION 
    This example demonstrates how to show a LoadingPanel when saving the Spreadsheet. 

    The Save method of the Spreadsheet fires a callback to the server, which is not caught by the PageRequestManager and RadAjaxManager. That is why, even though the Spreadsheet is AJAX-enabled, no loading panel is displayed when saving. 

    One workaround for this issue is overriding the save and _onCallbackResponse methods of the RadSpreadsheet and show/hide a Loading panel manually as described in the Show and Hide AjaxLoadingPanel explicitly article.

    <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
        <script>
            var currentLoadingPanel = null;
            var currentUpdatedControl = null;
            var originalFunction = Telerik.Web.UI.RadSpreadsheet.prototype.save;
     
            Telerik.Web.UI.RadSpreadsheet.prototype.save = function () {
                // show the loading panel
                currentUpdatedControl = "<%= RadSpreadsheet1.ClientID %>";
                currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
                currentLoadingPanel.show(currentUpdatedControl);
     
                // callback start
                originalFunction.call(this);
            }
     
            Telerik.Web.UI.RadSpreadsheet.prototype._onCallbackResponse = function () {
                // callback ended
                //hide the loading panel
                if (currentLoadingPanel != null) {
                    currentLoadingPanel.hide(currentUpdatedControl);
                }
     
                // clean up the global variables
                currentUpdatedControl = null;
                currentLoadingPanel = null;
            }
        </script>
    </telerik:RadCodeBlock>

     
  2. Daniel
    Daniel avatar
    3 posts
    Member since:
    Jun 2017

    Posted 07 Nov 2017 in reply to Telerik Admin Link to this post

    Is there a way for this script to catch a exception from the CustomSpreadsheetProvider save method? Are there documentation for the other methods of Telerik.Web.UI.RadSpreadsheet.prototype? Perhaps Telerik.Web.UI.RadSpreadsheet.prototype.onErrorResponse?

    Thank you

  3. Steven
    Steven avatar
    2 posts
    Member since:
    Dec 2016

    Posted 18 Aug 2019 in reply to Telerik Admin Link to this post

    When I run this it errors on 

    var originalFunction = Telerik.Web.UI.RadSpreadsheet.prototype.save;

    stating it can't find .prototype

    Any ideas?


  4. Robot B9
    Robot B9 avatar
    15 posts
    Member since:
    Oct 2011

    Posted 31 Mar Link to this post

    In all Browsers, the line 'Telerik.Web.UI.RadSpreadsheet.prototype.save' throws and error:
    Uncaught ReferenceError: Telerik is not defined.
    Intellesense will walk me through, so why would this not work? I added the script verbatim with the control specific ID changes.

    Thanks
  5. Attila Antal
    Admin
    Attila Antal avatar
    631 posts

    Posted 01 Apr Link to this post

    Problem Description

    The JavaScript exception "Uncaught ReferenceError: Telerik is not defined." occurs because the Telerik variable is not defined anywhere, yet another line is trying to reference it. For more information about the Exception, you can check out the MSD article: ReferenceError: "x" is not defined

    Telerik Assemblies include the necessary JavaScript code that will create and define these variables on-demand once the respective Control is added o the Page. If there are no Telerik Controls on the Page, the "Telerik" variable will not be available and any JavaScript code referencing it will throw the exception.

    Solution

    If you are planning to load these JavaScript lines on a Page where no Telerik is present, make sure to create a Condition that will check for the availability of the Variable first.

    var originalFunction = typeof Telerik == 'undefined'? undefined : Telerik.Web.UI.RadSpreadsheet.prototype.save;

    Regards,
    Attila Antal
    Progress Telerik

  6. Robot B9
    Robot B9 avatar
    15 posts
    Member since:
    Oct 2011

    Posted 01 Apr in reply to Attila Antal Link to this post

    This is the original problem when first upgrading the controls.
    We always check our pages for any issue with new 3rd party upgrades.
    This one page with the radSpreadsheet cause the following error (no radgrid, radPanel, etc issues. All pages use the master page).

    // Move jQuery to $telerik
    $telerik.$ = jQuery.noConflict(true);    *(error: Uncaught ReferenceError: $telerik is not defined)

    As you can see above, the error is the $Telerik var not assuming the JQuery.
    After cutting it back to just the radSpreasheet and our Master page, it still threw the above error.
    Only after isolating just the radSpreadsheet on an apsx page by itself (without any configuration or code behind) stopped the error.
    They way we thought we solved the error, was to add the following to our Master Page. It worked; maybe just covered up the real error. We weren’t sure why; because we know Telerik controls load their own Javascript libraries in parallel with the ones we use.

    This code was added to our Master page.

    <Scripts><br><asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /><br><asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /><br></Scripts>

    It seems all other pages we have using all forms of the Telerik controls did not have this issue after the upgrade.
    I’ve attached our master file, and the two pages (one with error and one without). I realize without the whole solution it may be impossible to tell what is happening.


  7. Attila Antal
    Admin
    Attila Antal avatar
    631 posts

    Posted 01 Apr Link to this post

    Hi Mark,

    The Code Library example attached to this article does not have that problem. If you are experiencing that exception in another project, please submit a Formal Support ticket and share all the details possible and we will troubleshoot the problem.

    Regards,
    Attila Antal
    Progress Telerik

    Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.