What I would like to do is call the Save As Excel from an external button, show a progress spinner instead of the button, and when the export is finished show the button again. This is to let the user know longer running exports are processing and not to keep clicking the button.
Here is some example code that fires the hide immediately after the save is called.
$('#export').click(function (e) {
showProgress();
e.preventDefault();
$('#Results').getKendoGrid().saveAsExcel();
// Bug: This processes immediately, need to wait for saveAsExcel to finish.
hideProgress();
});
8 Answers, 1 is accepted
Hello Scott,
You could attach a handler to the excelExport event of the Grid and hide the progress in the event handler.
Regards,Dimiter Madjarov
Telerik by Progress
Rank 1
Rank 1
Rank 1
Hi,
for a large Excel-File (8MB) the excelExport event fire to early:
It need 8 second to show the log:
function ExcelExport(e: any) { e.workbook.fileName = "excelexport.xlsx"; console.log("export to " + e.workbook.fileName); }
but total 26 second until the download is completed.
Is there an event 'ExcelDownloadCompleted' ?
I want disable the toolbar Export button until the download is completed.
Peter
Hi Peter,
Currently, the Kendo UI Grid does not expose an event to track when a file has been downloaded. This is due to the fact that the actual export is not part of the duties of the grid. The grid only says 'export this data' and does not know anything else about the process.
What I can recommend is that you disable the button within the ExcelExport event and set a setTimeout function that would make the button active after a certain period of time. Of course, you should set it according to the export time of your application.
Kind regards,
Tsvetomir
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Hi Tsvetomir,
I use the code from Progress Indicator for exporting to excel
var grid; function StartExcelExport(e) {
kendo.ui.progress($("#grid"), true); toolbar.enable("#idexportButton", false); //disables Toolbar Button grid.saveAsExcel(); } function ExcelExport(e: any) { // overriding the export event here allows us to insert // the progress indicators, and hide them when the save complete e.preventDefault(); $.when(function () { var def = jQuery.Deferred(); window.setTimeout(function () { var workbook = new kendo.ooxml.Workbook(e.workbook); kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: "Exportfile.xlsx", proxyURL: $("#grid").data("kendoGrid").options.excel.proxyURL }); def.resolve(); }, 100); return def.promise(); }()) .done(function () { kendo.ui.progress($("#grid"), false); toolbar.enable("#idexportButton", true); //enable Toolbar Button }); }In Init Code:
$("#toolbar").kendoToolBar({ items: [{ id: "idexportButton", type: "button", text: "Export", icon: "file-excel", click: StartExcelExport } ] }); grid = $("#grid").data("kendoGrid"); grid.bind("excelExport", ExcelExport); });
Best regards,
Peter
Rank 1
I forgot to copy the toolbar variable:
var toolbar;// in Init code:toolbar = $("#toolbar").data("kendoToolBar");Hi Peter,
Thank you for taking the time to share with the community the approach that you have undertaken.
However, I am not completely sure whether you have successfully integrated the suggestion into your application. Can you confirm that there are no issues with the project on your side? If not, could you share any questions that you might have with your next response?
Kind regards,
Tsvetomir
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.