This is a migrated thread and some comments may be shown as answers.

Excel Export Progress bar

4 Answers 343 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tomas
Top achievements
Rank 1
Tomas asked on 10 May 2018, 07:42 PM

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

Regards

 

4 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 14 May 2018, 11:23 AM
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.
0
Tomas
Top achievements
Rank 1
answered on 17 May 2018, 04:28 PM

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";
                      }
                  }
              },
0
Tomas
Top achievements
Rank 1
answered on 17 May 2018, 04:30 PM

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
                        }
                    }
                },
0
Viktor Tachev
Telerik team
answered on 21 May 2018, 08:25 AM
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.
Tags
Grid
Asked by
Tomas
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Tomas
Top achievements
Rank 1
Share this question
or