Grid Excel Export: Insert an image in header properties and custom group/aggregate rows

[Jesús Mostajo]

Hi,

I'm using Excel export in DataGrid. I have customized header and footer using Excel Export Properties in javascript. I need to insert an image in a cell, inside the header but I don't find the way to do this.

Is it possible?

On the other hand, the grouped/aggregated rows in excel file have a default 13pt font size, Is it possible adjust the font size for grouped/aggregated rows in Excel?

Thanks

[Pavithra Subramaniyam]

Hi Jesús Mostajo,

Thanks for contacting Syncfusion support.

Query#1: I need to insert an image in a cell, inside the header but I don't find the way to do this.

You can achieve your requirement by setting the “image” property to the excelHeaderCellInfo argument inside the “exportQueryCellInfo” event. Please refer to the below code example for more information.

 

function exportQueryCellInfo(args) {

  if (args.gridCell.column.headerText === 'Employee Image') {

    args.image = {

      height: 75,

      base64: imageBase64String,

      width: 75,

    };

  }

}

 

Query#2: the grouped/aggregated rows in excel file have a default 13pt font size, Is it possible adjust the font size for grouped/aggregated rows in Excel?

You can customize the footer fonts by setting the theme in excel export properties. Please refer to the below code example and documentation link for more information.

 

function toolbarClick(args) {

  if (args.item.id === 'Grid_excelexport') {

    const excelExportProperties = {

      theme: {

        caption: { fontSize: 20 },

      },

    };

    grid.excelExport(excelExportProperties);

  }

};

 

https://ej2.syncfusion.com/aspnetcore/documentation/grid/excel-export/excel-cell-style-customization#theme

Please get back to us if you need further assistance on this.

Regards,

Pavithra S

[Jesús Mostajo]

Hi Pavithra,

Thanks for your response, about Query#2 perfect, but over the Query#1 I have give you more details.

Your code insert the image in grid field column header, but I need insert the image in header, Exactly in cell A1 (the first row and column).

This is my actual code excerpt:

 function excelHeaderQueryCellInfo(args) {
        if (args.gridCell.column.field =='TaskName') {
            imageBase64String ='iVBORw0KGgoAAAAN...RK5CYII=';
            args.image = {
                height: 90,
                base64: imageBase64String,
                width: 75,
            };


            args.style = { fontSize: 12, bold: true, backColor: '#512E86', vAlign: 'Center', fontColor: '#FFFFFF' };
        }
        else {
            args.style = { fontSize: 12, bold: true, backColor: '#512E86', hAlign: 'Right', vAlign: 'Center', fontColor: '#FFFFFF' };
        }
    }

[Pavithra Subramaniyam]

Hi Jesús Mostajo,

If you want to add a separate header on top of the Grid, then you can achieve it by adding a header row using the excel export properties and using the below code in the Grid’s excelQueryCellinfo event you can add the corresponding image in the header.

var exportFlag= true;

 

function excelQueryCellInfo(args) {

        // The global flag checked here ensures this condition is executed only once since this event will be triggered for each Grid cell

    if(exportFlag) {

        if (ej.base.isNullOrUndefined(grid.excelExportModule.sheet.images)) {

            grid.excelExportModule.sheet.images = [];

        }

        var excelImage = {

            // Here you need to specify the base64 value of the image needed to be exported

            image: imageDetails1,

            // The row and column index for the image can be specified here

            row: 1,

            column: 1,

            lastRow: 1,

            lastColumn: 1

        };

        grid.excelExportModule.sheet.images.push(excelImage);

        exportFlag = false;

    }

    }

function toolbarClick(args) {

        if(args.item.text === 'Excel Export') {

        var excelExportProperties = {

            // Two empty header rows are added and passed to the Grid’s excel export method as excel export properties

            header: {

                headerRows: 2,

                rows: [

                    {

                        height: 75,

                        cells: [

                            {}

                        ]

                    },

                    {

                        height: 30,

                        cells: [

                            {}

                        ]

                    }

                ]

            }

        };

        // A global flag is enabled to identify this case in the excelQueryCellInfo event

        exportFlag = true;

        grid.excelExport(excelExportProperties);

    }

    }

 

API: https://ej2.syncfusion.com/javascript/documentation/api/grid/#excelquerycellinfo

Please get back to us if you need further assistance on this.

Regards,

Pavithra S

[Jesús Mostajo]

Perfect, thanks Pavithra S

[Pavithra Subramaniyam]

Hi Jesús Mostajo,

Welcome! Please get back to us if you need further assistance.

Regards,

Pavithra S