Progress Indicator for exporting to excel

9 posts, 0 answers
  1. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 06 May 2011 Link to this post

    Story:
    A user clicks on export to excel icon in the radgrid CommandItemTemplate section.

    The user waits for some type of indication and does not see that IE is working so clicks again and etc...

    We want a visible indicator to the user that the export is building and will soon download to their client machine...

    Any ideas?
  2. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 12 May 2011 Link to this post

    Hello Warren,

    It would be hard to implement a loading panel / progress bar when exporting because there is no easy way to detect when the file is exported.
    I attached a simple demo that uses a workaround in order to display an animated indicator. I hope this helps.

    Best regards,
    Daniel
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. croach01
    croach01 avatar
    22 posts
    Member since:
    Aug 2007

    Posted 22 Aug 2012 Link to this post

    I've implemented the technique outlined here.

    Basically, you handle the requestStart method of the RadAjaxPanel / RadAjaxManager which is needed for exporting anyway. Here, you can show a loading panel or other loading graphic, start a timer to check for a cookie from the server and when the cookie is found, you hide any loading graphics.  The following example is taken from a control I created that is a wrapper for my RadGrid.  My control contains a RadAjaxPanel, a RadAjaxLoadingPanel, and a HiddenField.  The hidden field contains the token used between the client and server.  The call to $.cookie requires the jquery.cookie plugin located here

    On the server you need to do handle the OnExporting event of the RadGrid:
    /// <summary>
    /// Aid in the hiding/showing of a loading panel while the export process is ocurring.
    /// hdDownloadToken contains a timestamp (token) of when the export started.  This is
    /// then passed back in the header of the response from the export engine and accessed
    /// via a timer on the client.  Once the client detects the token, it hides the loading message.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void RadGrid1_GridExporting(object sender, GridExportingArgs e)
    {
        Response.AppendCookie(new HttpCookie("fileDownloadToken", hdDownloadToken.Value));
    }


    On the client you need to do something like the following:
    _requestStart: function (sender, args)
        {
            if (args.get_eventTarget().indexOf("ExportToPdfButton") >= 0 || args.get_eventTarget().indexOf("ExportToExcelButton") >= 0)
            {
                // show the loading panel
                this._loadingPanel = $find(this.get_loadingPanelID());
                this._loadingPanel.show(this.get_id());
     
                // store the timestamp for access on the server
                this._downloadToken = new Date().getTime();
                $('#' this.get_downloadTokenFieldID()).val(this._downloadToken);
     
                // setup the timer to check for the completion of the file download
                var me = this;
                var checkTick = $.proxy(me._downloadCheckTick, me);
                this._downloadTimer = setInterval(checkTick, 1000);
     
                // need this for exporting to work
                args.set_enableAjax(false);
            }
        },
        _downloadCheckTick: function ()
        {
            // ticks every second
            // check for the cookie from the GridExporting event on the server.
            // if the token exists, fire the finished function
            var cookieValue = $.cookie('fileDownloadToken');
            if (cookieValue == this._downloadToken)
            {
                this._downloadFinished();
            }
        },
        _downloadFinished: function ()
        {
            // clear the timer, hide the loading panel and clear the cookie
            clearInterval(this._downloadTimer);
            this._loadingPanel.hide(this.get_id());
            $.cookie('fileDownloadToken'null);
        }
  5. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 27 Aug 2012 Link to this post

    Hello Casey,

    Thank you for sharing your code with our community. In order to attract more public attention, you can submit a simple runnable demo (as a code-library) showing your approach in action. Needless to say, we will reward your efforts with Telerik points.
    Using the Code Library

    On a side note, judging by your code, this will actually measure the time required to build the export output, but will not take the file download time into consideration. If you have a fast server and slow client-server connection it might take more time to download the file rather than to generate it on the server.

    Best regards,
    Daniel
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Murugesh
    Murugesh avatar
    7 posts
    Member since:
    Oct 2013

    Posted 02 Dec 2013 Link to this post

    Hello Sir,

    I am looking for the same function. is there anything available in the current release?

    Thank you

    Muru

  7. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 05 Dec 2013 Link to this post

    Hello Muru,

    This functionality is not built-in. You can use the approach demonstrated in the code-library below.

    Regards,
    Daniel
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. Ian
    Ian avatar
    1 posts
    Member since:
    Dec 2014

    Posted 24 Sep 2015 Link to this post

    Not sure if anyone is still looking for this solution but I found this to be a simple way of doing it.

    Just handle the excelExport event with a function like this:

     function onExportExcel(e) {
                e.preventDefault();
                kendo.ui.progress($(e.sender.element), true);

                $.when(function () {
                    var def = jQuery.Deferred();
                    window.setTimeout(function () {
                        var workbook = new kendo.ooxml.Workbook(e.workbook);
                        kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: "Test.xlsx" });
                        def.resolve();
                    }, 100);
                    return def.promise();
                }())
                .done(function () {
                    kendo.ui.progress($(e.sender.element), false);
                });
            }

     

    Though, it would be very nice if the saveAs function returned a promise so we could simplify this function a bit.

  9. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 25 Sep 2015 Link to this post

    Hello Ian,

    Thank you for sharing your solution with us. I would recommend that you post it in the Kendo forums as this way it can reach more people.

    Regards,
    Daniel
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  10. Rafe
    Rafe avatar
    9 posts
    Member since:
    Feb 2014

    Posted 21 Sep in reply to Ian Link to this post

    Additionally, if you need to support IE9, then you'll want to include the proxy url in that code. Something like this:

     

    excelExport: function(e) { 
                    // overriding the export event here allows us to insert
                    // the progress indicators, and hide them when the save complete              
                    e.preventDefault();
                    kendo.ui.progress($("body"), true);

                    $.when(function () {
                        var def = jQuery.Deferred();
                        window.setTimeout(function () {
                            var workbook = new kendo.ooxml.Workbook(e.workbook);
                            kendo.saveAs({
                                dataURI: workbook.toDataURL(),
                                fileName: "Test.xlsx",
                                proxyURL: $("#grid").data("kendoGrid").options.excel.proxyURL
                            });
                            def.resolve();
                        }, 100);
                        return def.promise();
                    } ())
                        .done(function () {
                            kendo.ui.progress($("body"), false);
                        });
                }

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017