Excel Export Progress bar

[Tomas]

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

Regards

 

[Viktor Tachev]

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:

• https://dojo.telerik.com/aVaFuvIN

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


Regards,
Viktor Tachev
Progress Telerik

[Tomas]

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";
                      }
                  }
              },

[Tomas]

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
                        }
                    }
                },

[Viktor Tachev]

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. 

• https://dojo.telerik.com/aVaFuvIN/5

The updated dojo outlines the approach.


Regards,
Viktor Tachev
Progress Telerik