Show waiting image while exporting in RadGrid

[Jhonattan]

Hi, i know if not posible export in a RadGrid with ajax and doesn't show loading panel. Exist Any way to simulate this, ie, show a wating image while export and hide it when the process finish

[Shinu]

Hi Jhonattan,


You could use the RadProgressArea to show the progress when exporting the grid.

Here is the forum link which discussed similar scenario.
AjaxLoadingPanel during Export process


-Shinu.

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