Show WaitingPopUp or Progressbar during Export

[Martin Sickel]

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]

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.  

Sample: http://www.syncfusion.com/downloads/support/forum/125299/ze/ExportGrid_ASP434812834 

Regards,  

Ragavee U S. 

[Mike Archipley]

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]

Thanks for your proposal, I will try it asap.

[Ragavee U S]

Hi Martin,  

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

Regards,  

Ragavee U S.  

[Mike Archipley]

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]

  

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.