Progress Indicator for exporting to excel

[Wired_Nerve]

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?

[Daniel]

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

[croach01]

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);
    }

[Daniel]

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

[Murugesh]

Hello Sir,

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

Thank you

Muru

[Daniel]

Hello Muru,

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

Regards,
Daniel
Telerik

[Ian]

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.

[Daniel]

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

[Rafe]

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);
                    });
            }

[Marcus]

I've been trying to figure out how to get this to work using JQuerys promises the past couple days before I fell on your post. It worked perfectly for what I needed but I definitely agree that it would be nice if the saveAs function itself returned a promise.

 

Thanks!