This is a migrated thread and some comments may be shown as answers.
Progress Indicator for exporting to excel
9 Answers 193 Views
This is a migrated thread and some comments may be shown as answers.
Wired_Nerve
Top achievements
Rank 2
Wired_Nerve asked on 06 May 2011, 03:34 PM
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?

9 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 12 May 2011, 12:53 PM
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.

0
croach01
Top achievements
Rank 1
answered on 22 Aug 2012, 03:24 PM
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);
    }
0
Daniel
Telerik team
answered on 27 Aug 2012, 08:39 AM
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.
0
Murugesh
Top achievements
Rank 1
answered on 02 Dec 2013, 06:48 PM

Hello Sir,

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

Thank you

Muru

0
Daniel
Telerik team
answered on 05 Dec 2013, 11:29 AM
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.
0
Ian
Top achievements
Rank 1
answered on 25 Sep 2015, 02:45 AM

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.

0
Daniel
Telerik team
answered on 25 Sep 2015, 07:01 AM
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
0
Rafe
Top achievements
Rank 1
answered on 21 Sep 2016, 02:16 PM

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

0
Marcus
Top achievements
Rank 1
answered on 16 Jan 2018, 09:51 PM

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!

Tags
Grid
Asked by
Wired_Nerve
Top achievements
Rank 2
Answers by
Daniel
Telerik team
croach01
Top achievements
Rank 1
Murugesh
Top achievements
Rank 1
Ian
Top achievements
Rank 1
Rafe
Top achievements
Rank 1
Marcus
Top achievements
Rank 1
Share this question
or