Excel Export Progress bar

5 posts, 0 answers
  1. Tomas
    Tomas avatar
    11 posts
    Member since:
    Apr 2013

    Posted 10 May 2018 Link to this post

    Hi, I need know if exist some way to show a progress bar while the excel export is executing like pdf export.

    Regards

     

  2.
  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 14 May 2018 Link to this post

    Hello Tomas,

    Showing a loading indicator when exporting data to Excel is not available out of the box. However, it can be implemented with a bit of additional code. In order to show the progress indicator you can use the excelExport event. In order to hide the loading image handle the DataSource requestEnd event and hide it manually.

    The dojo example below outlines the approach:


    Give it a try and let me know how it works for you.


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Tomas
    Tomas avatar
    11 posts
    Member since:
    Apr 2013

    Posted 17 May 2018 in reply to Viktor Tachev Link to this post

    Hi Viktor,

                   Thanks for answering, I tried but it didn't work for me, the reason is that the excelExport event fire after the requestEnd and if I trying to bind my loading function from another side, on additional code, the grid reset when I hide a column. Please take a look at my code on the excelExport below.

    requestEnd: function(){
              var grid = $("#grid").getKendoGrid();
              setTimeout(function () {
                       kendo.ui.progress(grid.element, false);
             });
     
     excelExport: function (e) {
                      kendo.ui.progress(this.element, true);
                      var sheet = e.workbook.sheets[0];
                      for (var i = 0; i < sheet.rows.length; i++) {
                          for (var ci = 0; ci < sheet.rows[i].cells.length; ci++) {
                              sheet.rows[0].cells[ci].background = "#4472C4";
                              sheet.rows[i].cells[ci].hAlign = "left";
                          }
                      }
                  },
  7. Tomas
    Tomas avatar
    11 posts
    Member since:
    Apr 2013

    Posted 17 May 2018 in reply to Viktor Tachev Link to this post

    Hi Viktor,
                   Thanks for answering, I tried but it didn't work for me, the reason is that the excelExport event fire after the requestEnd and if I trying to bind my loading function from another side, on additional code, the grid reset when I hide a column. Please take a look at my code on the excelExport below.

      excelExport: function (e) {
                        kendo.ui.progress(this.element, true);
                        var sheet = e.workbook.sheets[0];
                        for (var i = 0; i < sheet.rows.length; i++) {
                            for (var ci = 0; ci < sheet.rows[i].cells.length; ci++) {
                                sheet.rows[0].cells[ci].background = "#4472C4";
                                sheet.rows[i].cells[ci].hAlign = "left";
                            }
    //Data Source
          var datas = new kendo.data.DataSource();
                datas = {
                    requestEnd: function(){
                        var grid = $("#grid").getKendoGrid();
                        setTimeout(function () {
                            kendo.ui.progress(grid.element, false);
                        });
                    },
                    type: "webapi",
                    transport: {
                        read: {
                            url: "/apiAsap/search/getClientDetail",
                            dataType: 'json',
                            data: {
                                accountId: accountId
                            },
                            headers: {
                                'auth': $sessionStorage.a_jwt
                            }
                        }
                    },
  8.
  9. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 21 May 2018 Link to this post

    Hello Tomas,

    Another option is to handle the click event of the excel export button. In the handler you can get reference of the Grid and show the loading panel explicitly. 


    The updated dojo outlines the approach.


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top