We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Show WaitingPopUp or Progressbar during Export

Thread ID:

Created:

Updated:

Platform:

Replies:

125299 Aug 5,2016 06:00 PM UTC Jan 5,2017 06:03 AM UTC ASP.NET Web Forms 6
loading
Tags: Grid
Martin Sickel
Asked On August 5, 2016 06:00 PM UTC

Dear All

I have a simple WEB-Page created which includes a Grid with Data, Serachoption and ExcelExport are enabled and working fine.
My question I have is:
How can I show a WaitingPopUp or Progressbar as long the Export is ongoing?
After the WEB-Page shows the open / download Interface, the WaitingPopUp or Progressbar should be removed. 

Martin

Ragavee U S [Syncfusion]
Replied On August 8, 2016 07:39 AM UTC

Hi Martin,  

Thanks for your interest in Syncfusion products. 

We have used form submit action for exporting Grid and so full post will occur and it reloads the page While exporting the Grid. Without making full post, we are unable to download the exported Excel file. So it is not possible to have a waiting popup for the export action of Grid when using the default “export” method of the Grid.  

But we have achieved your requirement using Ajax call and localSave option of exporting. LocalSave can be enabled using one of the overload of the export method. In this method, the web browser will never popup window and asks for the path to save but it automatically save the exported file in the mentioned path. Please refer to the below code example.  

    <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="true"> 
        <ClientSideEvents ToolBarClick="toolBarClick" /> 
            . . .             
    </ej:Grid> 
 
    <script type="text/javascript"> 
        function toolBarClick(args) { 
            var proxy = this; 
            if (args.itemName == "Excel Export") { 
                args.cancel = true; 
                proxy.element.ejWaitingPopup("show"); 
                var model = $.extend(true, {}, this.model); 
                if (this.ignoreOnExport) { 
                    for (var i = 0; i < this.ignoreOnExport.length; i++) 
                        delete model[this.ignoreOnExport[i]]; 
                } 
                $.ajax({ 
                    type: "POST", 
                    url: "/WebService1.asmx/ExportToExcel", 
                    data: { GridModel: JSON.stringify(model) },//pass the grid model                     
                    success: function (response) { 
                        proxy.element.ejWaitingPopup("hide"); 
                        alert("Grid Exported"); 
                    }, 
                    error: function (Result) { 
                        alert("Error"); 
                    } 
                }); 
            } 
        } 
         
    </script> 
 
[WebMethod] 
        [ActionName("ExportToExcel")]   
        [AcceptVerbs("POST")]     
        public string ExportToExcel() 
        { 
            string gridModel = HttpContext.Current.Request.Params["GridModel"]; 
            GridProperties gridProperty = ConvertGridObject(gridModel); 
            ExcelExport exp = new ExcelExport(); 
 
            IEnumerable result = OrderRepository.GetAllRecords().ToList(); 
            exp.Export(gridProperty, (IEnumerable)result, "Export.xlsx", ExcelVersion.Excel2010, false, false, "flat-lime", true, Server.MapPath("/outPut")); 
            return "success";  
 
        } 

We have also prepared a sample that can be downloaded from the following location.  


Regards,  
Ragavee U S. 


Mike Archipley
Replied On December 30, 2016 07:26 PM UTC

Hi Martin,
I faced the same issue and was able to get it working without using the localSave option. What I did is create a waiting dialog using the body as the target and a unique token using a timestamp and appending that as a variable on the URL passed to the export function like so:

if (args.text == "Export to Excel"){
$("body").append("<div id='downloadPopup'></div>");
    //Create a waiting popup when the export starts
    $("#downloadPopup").ejWaitingPopup({
        showOnInit: true,
        target: "body",
        text: "Exporting grid. Please be patient as it may some time depending on the number of records."
    });
    var exportID = new Date().getTime();
    var exportURL = exportServer + "/ServerOperations/api/Orders/Export/?exportID=" + exportID + "&type=excel";
    ej.Grid.exportAll("http://localhost/ServerOperations/api/Orders/Export/?exportID=" + exportID + "&type=excel",grids);
}

That will create a URL that is passed to the export that looks something like this "http://localhost/ServerOperations/api/Orders/Export/?exportID=1483124235807&type=excel"

Now on the server side using the WebAPI, use that exportID on the URL to create a cookie:
var context = HttpContext.Current;
String exportID= context.Request["exportID"];
var response = HttpContext.Current.Response;
response.AppendCookie(new HttpCookie("fileDownloadToken", exportID));

If you are using the default export routine as outlined in the documentation, just assign the workbook variable to the export function then use the saveAs function to pass the response containing your cookie:

workbook = exp.Export(gridProp, (IENumerable)gridProp.dataSource, "Export.xlsx", ExcelVersion.Excel2010, false, true, "bootstrap-theme", true);
workbook.SaveAs("Export.xlsx", response, ExcelDownloadType.PromptDialog, ExcelHttpContentType.Excel2010);

Back on the client end, create a timer that looks checks for the cookie value and compares it to the exportID that will hide the waiting popup once the condition is true. Note that the getCookie function referenced is not a native JS/JQuery function. The cookies come across as one string so they have to be parsed. I'll include that function for your reference as well.

var fileDownloadCheckTimer = window.setInterval(function () {
        var cookieValue = getCookie('fileDownloadToken');
       
       
        if (cookieValue == exportID){
            window.clearInterval(fileDownloadCheckTimer);
            $("#downloadPopup").ejWaitingPopup("hide");
        //    alert("export complete");
        }
      }, 1000);
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

I hope that helps a bit as I needed a solution as well and using the localSave option would not work in my case.

Regards,
Mike Archipley

Martin Sickel
Replied On December 30, 2016 07:51 PM UTC

Thanks for your proposal, I will try it asap.

Ragavee U S [Syncfusion]
Replied On January 2, 2017 04:33 AM UTC

Hi Martin,  

Please try the given solution and let us know if it helps.  

Regards,  
Ragavee U S.  


Mike Archipley
Replied On January 4, 2017 03:46 PM UTC

Sounds good Martin. I subscribed to this post so I will be notified of any further posts. Let me know if you run into any issues and I will see if I can assist. I've been using the Syncfusion GridJS controls for some time and have added a lot of customized functionality to meet our customers needs. Also, their support team is awesome and is always quick to assist when needed.

Best Regards,
Mike

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On January 5, 2017 06:03 AM UTC

  
Hi Martin, 


Thanks for your update. We are glad to hear that your problem has resolved by us. Please get back to us if you require any further assistance. 


Regards, 

Farveen T. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;