Function colorInfo is not working when using an igHierarchicalGrid export Excel

[Elvis Matus]

Description

The coloInfo function does not generate any color that I assign to the text of a cell, when it is an igHierarchicalGrid, which is exported to Excel.

• ignite-ui version: 23.1.9
• browser: Any

Steps to reproduce

1. Create an igHierarchicalGrid
2. Use the $.ig.GridExcelExporter.exportGrid function
3. On cellExporting: function (e, args) {} try something like this:
   args.xlRow.getCellFormat(args.columnIndex).font().colorInfo($.ig.excel.WorkbookColorInfo("orange"));

Result

The text of the cell is still in black

Expected result

Cell text changed with the color I passed.

Attachments

[Elvis Matus]

Please, I need this error to be resolved soon.

[Riva Ivanova]

Hi @elvismatus,

After an investigation, what I can say is that the described behavior is related to the gridStyling option which indicates whether the excel table styles will be the same as the grid styles and is set to "applied" by default.

When set to "applied", additional code is executed in order for the Excel table styles to be the same as the grid styles. This is mainly about the grid’s and child grids’ headers, however, additional styling is applied for the cell’s background and text color as well.

This is the expected behavior when the gridStyling option is set to "applied".

If you want to change the cell’s text color, this could be achieved with the following:

$.ig.GridExcelExporter.exportGrid(
  $("#grid"),
  {
    fileName: "igGrid",
    gridStyling: "none",
  },
  {
    cellExporting: function (sender, args) {
      if (args.columnKey === "Address") {
        args.xlRow
          .cells(args.columnIndex)
          .cellFormat()
          .font()
          .colorInfo(new $.ig.excel.WorkbookColorInfo("purple"));
      }
    },
  }
);

Additionally, as the default headers‘ styles will not be exported, you could apply them in a similar manner inside the headerCellExporting event:

$.ig.GridExcelExporter.exportGrid(
  $("#grid"),
  {
    fileName: "igGrid",
    gridStyling: "none",
  },
  {
    headerCellExporting: function (sender, args) {
      args.xlRow
        .cells(args.columnIndex)
        .cellFormat()
        .fill($.ig.excel.CellFill.createSolidFill("#888888"));
      args.xlRow
        .cells(args.columnIndex)
        .cellFormat()
        .font()
        .colorInfo(new $.ig.excel.WorkbookColorInfo("#ffffff"));
    },
    cellExporting: function (sender, args) {
      ...
    },
  }
);

Please note that when setting the colorInfo, the new keyword must be used.

.colorInfo(new $.ig.excel.WorkbookColorInfo("purple"));

Also, you could set the Excel table styles via the tableStyle option which specifies the Excel table style region.

Here could be found a small sample demonstrating my suggestion. I hope it helps implement your requirements.

[Elvis Matus]

Thanks @RivaIvanova,

By setting the gridStyling to none and making use of the .cells().cellFormat() functions, I have managed to make the color changes successfully.