JS2 Grid - Cannot export in Excel column data from template

[Stathis]

Hi,

I'm using template column(s) to display data in the grid area.
I would like the excel export to take into account the template data and export accordingly.
Currently, the exported file contains only original data in the template column (the actual number that comes from application_status column) and not the text that comes from the template.

My Grid object is declared as:

var data = new ej.data.DataManager({
    url: 'my url here',
    adaptor: new ej.data.ODataV4Adaptor(),
    crossDomain: true
});
var grid = new ej.grids.Grid({
    dataSource: data,
    toolbar: ['ExcelExport', 'CsvExport','Search'],
    editSettings: { allowEditing: false, allowAdding: false, allowDeleting: false },
    gridLines: 'Both',
    allowResizing: true,
    allowExcelExport: true,
    allowPdfExport: true,
    toolbarClick: ToolbarClickHandler,
    rowSelected: rowSelected,
    commandClick: CommandClickHandler,
    columns: [
                { field: 'id', width: 50, headerText: 'CODE', type: 'number' },
                { field: 'last_name', headerText: 'LAST NAME', type: 'string', visible:false },
                { field: 'first_name', headerText: 'FIRST NAME', type: 'string', visible:false },
                { field: 'application_status', headerText: 'STATUS', type: 'string', template: '#applicationStatus' }
    ],
    allowPaging: true,
    pageSettings: { pageSize: 20,  pageCount: 10 },
    allowSorting: true,
    actionComplete: complete,
    allowFiltering: false,
    dataBound: function(){
       //grid.autoFitColumns(['memberCard', 'id'])
       //grid.autoFitColumns()
    },
});

window.applicationStatus = function (e) {
    var grid = document.getElementById("Grid").ej2_instances[0];
    var status_text = "";

    switch(e.application_status){
        case "1":
            status_text = 'NEW';
            break;
        case "2":
            status_text = 'STATUS 2 DESC';
            break;
        case "3":
            status_text = 'STATUS 3 TEXT';
            break;
        case "4":
            status_text = 'STATUS 4 TEXT';
            break;
        case "5":
            status_text = 'STATUS 5 TEXT';
            break;
        default:
        status_text = 'DEFAULT?';
    }
    return status_text;
};

and the template is declared as:

<script id="applicationStatus" type="text/x-template">
    ${applicationStatus(data)}
</script>

[Vikram Sundararajan]

Hi Stathis,

Greetings from Sycnfusion support,

Based on your query regarding the Excel export with template columns in the Syncfusion Grid. We understand that you're using a template to display custom text in the grid and would like the Excel export to reflect this custom template text instead of the underlying data.

We have created a sample based on your provided code that demonstrates how to use a template for a column to display custom text based on the cell's data and ensure that the same custom text is exported to Excel.

In this sample, we apply a template to the column (ShipCountry) to display custom text based on the field value. The excelQueryCellInfo event is also configured to replace the default cell value with the template text during export. You can see the code sample below:

window.getShipCountryText = function (data) {

  switch (data.ShipCountry) {

    case 'USA':

      return 'United States';

    case 'UK':

      return 'United Kingdom';

    case 'France':

      return 'French Republic';

    }

};

 

var grid = new ej.grids.Grid({

  dataSource: data,

  allowPaging: true,

  allowSorting: true,

  allowExcelExport: true,

  toolbar: ['ExcelExport', 'Search', 'CsvExport'],

  columns: [

//other columns

     {

      field: 'ShipCountry',

      headerText: 'Ship Country',

      width: 150,

      template: '${getShipCountryText(data)}',

    },

  ],

  pageSettings: { pageCount: 5 },

 excelQueryCellInfo: function (args) {

    if (args.column.field === 'ShipCountry') {

      args.value = getShipCountryText(args.data);

    }

  },

});

grid.appendTo('#Grid');

Sample: https://stackblitz.com/edit/jhwudp-jppabw?file=index.js,index.html

We have also documented similar approaches for handling templates and customizing exports in our Syncfusion documentation. Please refer to this documentation for further details.

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/excel-export/exporting-with-templates

Demo: https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/grid/default-exporting.html

Please get back us if you need further assistance.

Regards,

Vikram S

[Stathis]

This is exactly what i was looking for, you really made my day Vikram, many thanks!

[Vikram Sundararajan]

Hi Stathis,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.