Save As Excel Callback

9 posts, 0 answers
  1. Scott
    Scott avatar
    20 posts
    Member since:
    Aug 2012

    Posted 18 Jul 2016 Link to this post

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

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 20 Jul 2016 Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Scott
    Scott avatar
    20 posts
    Member since:
    Aug 2012

    Posted 20 Jul 2016 in reply to Dimiter Madjarov Link to this post

    That works.  Thanks.
  4. Scott
    Scott avatar
    20 posts
    Member since:
    Aug 2012

    Posted 20 Jul 2016 in reply to Dimiter Madjarov Link to this post

    That works.  Thanks.
  5. Peter
    Peter avatar
    33 posts
    Member since:
    Mar 2019

    Posted 18 Mar Link to this post

    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

  6. Tsvetomir
    Admin
    Tsvetomir avatar
    830 posts

    Posted 22 Mar Link to this post

    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.

  7. Peter
    Peter avatar
    33 posts
    Member since:
    Mar 2019

    Posted 22 Mar in reply to Tsvetomir Link to this post

    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

  8. Peter
    Peter avatar
    33 posts
    Member since:
    Mar 2019

    Posted 22 Mar in reply to Peter Link to this post

    I forgot to copy the toolbar variable:

    var toolbar;
     
    // in Init code:
    toolbar = $("#toolbar").data("kendoToolBar");
  9. Tsvetomir
    Admin
    Tsvetomir avatar
    830 posts

    Posted 23 Mar Link to this post

    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/.

Back to Top