JNM
JNM

Reputation: 1195

Ignite UI export to excel table with multi-column header

I am using Ignite UI in my website to view the table and i need to export it to excel. I am using default Infragistricts functionality $.ig.GridExcelExporter.exportGrid, but i get table with only lower part of header. I have multi-column header, and i get only the lower part. Is there a way to fix it?

enter image description here

Upvotes: 1

Views: 1087

Answers (1)

the igGridExcelExporter does not handle the MultiColumnHeaders. Also, the grid is exported into a table region inside the worksheet, which does not allow cell merging. This means that you can imitate a multi header by inserting a new row and merging cells in the exportEnding event:

exportEnding: function(sender, args) {
    args.worksheet.rows().insert(0, 1); // insert one new row at index 0
    //create a merged cells region that will act as a multi header
    var mergedHeaderRegion = args.worksheet.mergedCellsRegions().add(0,1,0,2); // firstRowIndex, firstColumnIndex, lastRowIndex, lastColumnIndex
    mergedHeaderRegion.value("Month1");

    // style the newly inserted row as a header
    for (var columnIndex = 0; columnIndex < 4; columnIndex++) {
       args.worksheet.rows(0).getCellFormat(columnIndex).fill($.ig.excel.CellFill.createSolidFill("rgb(136, 136, 136)"));
       args.worksheet.rows(0).getCellFormat(columnIndex).font().colorInfo(new $.ig.excel.WorkbookColorInfo("rgb(255, 255, 255)")); }
}

You can also refer to the following help topics and API docs:

http://www.igniteui.com/help/javascript-excel-library-merge-cells

http://help.infragistics.com/jQuery/2015.2/

Upvotes: 3

Related Questions