Kendo UI Grid - Excel Export with hidden columns and custom formatting

问题

I'm attempting to use the Grid component's built-in support for exporting to excel, applying custom cell formatting as shown in these Telerik docs:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/excel/cell-format

The approach using hard-coded row / cell indexes in the export comes with a rather obvious issue when exporting a grid with a prior hidden column displayed - best way to reproduce is to refer to this jsfiddle:

https://jsfiddle.net/3anqpnqt/1/

Run fiddle
Click export to excel - observe custom number formatting
Unhide subcategory column (using column menu)
Click export to excel - observe custom number formatting on column 2 which is now 'subcategory'

With reference to this code in the fiddle:

$("#grid").kendoGrid({
    toolbar: ["excel"],
    excel: {
      fileName: "Grid.xlsx",
      filterable: true
    },
    columns: [
      { field: "productName" },
      { field: "category" },
      { field: "subcategory", hidden: true },
      { field: "unitPrice"}
    ],
    dataSource: [
      { productName: "Tea", category: "Beverages", subcategory: "Bev1", unitPrice: 1.5 },
      { productName: "Coffee", category: "Beverages", subcategory: "Bev2", unitPrice: 5.332 },
      { productName: "Ham", category: "Food", subcategory: "Food1", unitPrice: -2.3455 },
      { productName: "Bread", category: "Food", subcategory: "Food2", unitPrice: 6 }
    ],
    columnMenu: true,
    excelExport: function(e) {      
      var sheet = e.workbook.sheets[0];

      for (var rowIndex = 0; rowIndex < sheet.rows.length; rowIndex++) {
        var row = sheet.rows[rowIndex];
        var numericFormat = "#,##0.00;[Red](#,##0.00);-";
        for (var cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {
            var cell = row.cells[cellIndex];
            if (row.type === "data") {
                if (cellIndex == 2) { // how are we able to identify the column without using indexes?
                    cell.format = numericFormat;
                    cell.hAlign = "right";
                }
            }
        }      
      }      
    }
});

What I need to be able to do is identify the cell as the 'unitPrice' and apply the format, but inspection of the object model within the excelExport handler doesn't give me any way to make this link. In my real application, I have several custom formats to apply (percentages, n0, n2 etc) so it's not as simple as going $.isNumeric(cell.value) or otherwise.

Update

I also need the solution to work with column / row groups, which generate additional header rows / columns in the Excel model.

回答1:

It looks like row[0] is the header row, so you could try changing

if (cellIndex == 2) {

if (sheet.rows[0].cells[cellIndex].value == "unitPrice") {

EDIT:

Seems to work with column group: https://jsfiddle.net/dwosrs0x/

Update:

The object model for worksheet is not the most clear. The first row does seem to be a "master" header row in the various scenarios that I looked at. Here is something that seems to work if unitPrice is not in a grouping. If unitPrice is in a grouping, then something more complicated involving the group header (row[1]) might be possible. The puzzle is to find out what position the desired column will eventually occupy.

var header = sheet.rows[0];
var upIndex = -1;
var upFound = false;

for (var cellIndex = 0; cellIndex < header.cells.length; cellIndex++) {

    if ('colSpan' in header.cells[cellIndex]) 
        upIndex = upIndex + header.cells[cellIndex].colSpan;
    else 
        upIndex = upIndex + 1;

    if (header.cells[cellIndex].value == "unitPrice") { // wot we want
        upFound = true;
        break;
    }
}

for (var rowIndex = 0; rowIndex < sheet.rows.length; rowIndex++) {
    var row = sheet.rows[rowIndex];
    if (row.type === "data" && upFound) {
        var cell = row.cells[upIndex];
        cell.format = numericFormat;
        cell.hAlign = "right";
    }

}

fiddle with groups - https://jsfiddle.net/dwosrs0x/4/

fiddle with straightforward grid (to prove it still works) - https://jsfiddle.net/gde4nr0y/1/

This definitely has the whiff of "bodge" about it.

来源：https://stackoverflow.com/questions/35844063/kendo-ui-grid-excel-export-with-hidden-columns-and-custom-formatting

标签

kendo-ui

kendo-grid

kendo-ui-grid