Show hidden columns in Kendo grid excel export

问题:

I have a kendo grid and I can export its data into excel file without any problem. In my grid, some columns may be hidden because they do not have any value. However, I want even these hidden columns (I mean their header) be in my exported excel file.

Here is a piece of code showing the excel config in my Kendo grid configuration.

excel: {
         fileName: new Date().toString() + ".xlsx",
         allPages: true,
       },

Any help would be appreciated.

回答1:

You can have columns in an array which defines hidden: true and then simply traverse through columns array and show/hide columns just before export as following:

        function excelExport(e) {
              if (!exportFlag) {
                  for(var i=0; i < columns.length; i++) {
                      if(columns[i].hidden)
                          e.sender.showColumn(i);
                  }
                  e.preventDefault();
                  exportFlag = true;
                  setTimeout(function () {
                    e.sender.saveAsExcel();
                  });
                } else {
                    for(var i=0; i < columns.length; i++) {
                          if(columns[i].hidden)
                              e.sender.hideColumn(i);
                      }
                  exportFlag = false;
                }
      }

回答2:

I was looking to achieve a similar thing and used the answer provided by @Ankur with slight modification as I needed to hide the columns again after the export.

Code as follows:

excelExport(e) {
                Spa.startLoading(); // loading overlay to hide the columns showing then hiding again
                var columns = e.sender.columns;
                var hiddenColumnNumbers = [];
                if (!exportFlag) {
                    for (let i = 0; i < columns.length; i++) {
                        if (columns[i].hidden) {
                            e.sender.showColumn(i);
                            hiddenColumnNumbers.push(i);
                        }
                    }
                    e.preventDefault();
                    exportFlag = true;
                    setTimeout(() => {
                        e.sender.saveAsExcel();
                        for (let j = 0; j < columns.length; j++) {
                            if (hiddenColumnNumbers.indexOf(j) > -1) {
                                e.sender.hideColumn(j);
                            }
                        }
                        Spa.stopLoading(); // hide loading overlay
                    });
                } else {
                    for (let k = 0; k < columns.length; k++) {
                        if (columns[k].hidden)
                            e.sender.hideColumn(k);
                    }
                    exportFlag = false;
                    Spa.stopLoading(); // hide loading overlay
                }
            },

回答3:

You can add some javascript to control this.

var exportFlag = true;

$("#gridName").data("kendoGrid").bind("excelExport", function (e) {
    if (exportFlag) {
        e.sender.showColumn("hiddenColumnName");
        e.preventDefault();
        exportFlag = false;
        e.sender.saveAsExcel();
    } else {
        e.sender.hideColumn("hiddenColumnName");
        exportFlag = true;
    }
});

Basically this catches the excelExport event when you click the Export button and shows the hidden column in your grid before it fires the saveAsExcel() function which saves your document. Then it hides the column again.

Here is an Example you can test with.