1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. EJ2 Grid - Excel Export Image (Bug)

EJ2 Grid - Excel Export Image (Bug)

Hello,

I am trying to export a base64 image to Excel. Everything displays correctly in the grid, but when I click export, I get an error and nothing exports. Hopefully, the following information helps understand the issue.

I am following the demo here: https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/grid/default-exporting.html

I am running version 20.1.55.

I get this error on export:

ej2.min.js?id=6af91d389b3b2018169a:1 Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'width')

at e.setImage (ej2.min.js?id=6af91d389b3b2018169a:1:8946452)

My code is as follows:

<script id="frontTemplate" type="text/x-template">
<img src="${front_picture}" >
</script>

GRID COLUMNS:
{field: 'front_picture', headerText: 'Front Picture', template: "#frontTemplate",},

FUNCTIONS (allowExcelExport is true and the below is bound to the event:

function excelQueryCellInfo(args) {
console.log(args);
if (args.column.field === 'front_picture' && args.data.front_picture) {
args.image = { height: 248, width: 330, base64: args.data.front_picture.substr(args.data.front_picture.indexOf(',')+1) };
}
}


CONSOLE OUTPUT:

{

"data": {

"front_picture": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUoAAAD4CAYAAACKXK.....",

"availableCameras": "4f8699e724bccae04650a97e79bbfab03fda57f370602971aded5ef7d5fe04d8"

},

"column": {

"disableHtmlEncode": true,

"allowSorting": true,

"allowResizing": true,

"allowFiltering": true,

"allowGrouping": true,

"allowReordering": true,

"showColumnMenu": true,

"enableGroupByFormat": false,

"allowEditing": true,

"showInColumnChooser": true,

"allowSearching": true,

"autoFit": false,

"sortDirection": "Descending",

"field": "front_picture",

"uid": "grid-column4",

"foreignKeyField": "front_picture",

"visible": true,

"index": 4,

"type": "string"

},

"value": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUoAAAD4CAYAAACKXK....",

"colSpan": 1,

"cell": {},

"name": "excelQueryCellInfo",

"image": {

"height": 248,

"width": 330,

"base64": "iVBORw0KGgoAAAANSUhEUgAAAUoAAAD4CAYAAACKXK....."

}

}


ej2.min.js?id=6af91d389b3b2018169a:1 Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'width')

at e.setImage (ej2.min.js?id=6af91d389b3b2018169a:1:8946452)

at e.processRecordRows (ej2.min.js?id=6af91d389b3b2018169a:1:8944935)

at e.processRecordContent (ej2.min.js?id=6af91d389b3b2018169a:1:8942285)

at e.processGridExport (ej2.min.js?id=6af91d389b3b2018169a:1:8941936)

at ej2.min.js?id=6af91d389b3b2018169a:1:8939556

at new Promise ()

at e.processInnerRecords (ej2.min.js?id=6af91d389b3b2018169a:1:8939507)

at ej2.min.js?id=6af91d389b3b2018169a:1:8937916


18 Replies
MA Mark June 14, 2022 12:01 AM UTC

Ok, there is clearly a bug in the source because removing line 583 from excel-export.js allows the file to export. The image is there, the column is just squished due to not setting width. At issue, it seems that the this.columns does not have the width property. The index that is being passed is a valid index, so column is not getting its initial width set in ExcelExport.prototype.processHeaderContent line 816.


Source Code:


ExcelExport.prototype.setImage = function (args, idx) {
if (isNullOrUndefined(this.sheet.images)) {
this.sheet.images = [];
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var excelImage = {
image: args.image.base64, row: this.rowLength, column: idx,
lastRow: this.rowLength, lastColumn: idx
};
this.sheet.images.push(excelImage);
this.columns[idx - 1].width = args.image.width || this.columns[idx - 1].width;
return args.image.height || 50;
};


Remove this line:
this.columns[idx - 1].width = args.image.width || this.columns[idx - 1].width;

VB Vinitha Balasubramanian Syncfusion Team June 14, 2022 04:24 PM UTC

Hi Mark,


Greetings from the Syncfusion support.


Currently we are working your query and we will update further details on June 16 2022.


Until then we appreciate your patience.


Regards,

Vinitha Balasubramanian


MA Mark replied to Vinitha Balasubramanian June 15, 2022 12:52 PM UTC

Thank you.  We will be anxiously awaiting the teams response as we are at a dead stop on this.


VB Vinitha Balasubramanian Syncfusion Team June 17, 2022 05:06 PM UTC

Hi Mark,


Sorry for the inconvenience caused.


We need some more time to achieve your requirement. We will update you the further details by June 21, 2022.


We appreciate your patience until then.


Regards,

Vinitha Balasubramanian


VB Vinitha Balasubramanian Syncfusion Team June 21, 2022 04:12 PM UTC

Hi Mark,


Thanks for the patience.


Query : EJ2 Grid - Excel Export Image.


We have analyzed your query, you faced an issue while perform ExcelExporting. We have created a sample based on details you have shared with us. On that sample, we were not able to reproduce an issue on performing excelExport.


Kindly share the below details with us to validate your query further at our end.


  • Please share the details of Grid column definition
  • Please share the details, if you dynamically bind  show/hide any column in Grid component


Sample link : https://stackblitz.com/edit/htunrg-tjrwfh?file=index.js,index.html


Regards,

Vinitha Balasubramanian


MA Mark June 23, 2022 03:10 PM UTC

Thank you for the example, but I was able to make it not work. I guess we were working on 20.1.58 and not 55, so to prove the bug, if you load your Stackblitz and just change the JavaScript version of the ej script to 20.1.57+ it will fail with that error.

Error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'width')

at e.updatelastColumnOffSet (ej2.min.js:10:7796501)

at e.saveDrawings (ej2.min.js:10:7793905)

at e.saveWorksheet (ej2.min.js:10:7793271)

at e.saveWorksheets (ej2.min.js:10:7790727)

at e.saveInternal (ej2.min.js:10:7789516)

at e.save (ej2.min.js:10:7789252)

at ej2.min.js:10:8952771


The following work:

<script src="https://cdn.syncfusion.com/ej2/20.1.55/dist/ej2.min.js" type="text/javascript">script>
<script src="https://cdn.syncfusion.com/ej2/20.1.56/dist/ej2.min.js" type="text/javascript">script>


The following fail:

<script src="https://cdn.syncfusion.com/ej2/20.1.57/dist/ej2.min.js" type="text/javascript">script>
<script src="https://cdn.syncfusion.com/ej2/20.1.58/dist/ej2.min.js" type="text/javascript">script>


Edit: Wait a minute, now its working...Let me keep debugging this, because the stackblitz failed and now its working. Ok, finally figured it out.

From 20.1.57 on, if the image is the only defined column in the grid, it throws the error, where if you run 20.1.56 or lower, it works fine. So to test in your stackblitz because for some reason I can't save an anonymous version, just simply change the Syncfusion version to 20.1.57 and then define your columns like this:


This fails:

columns: [
{
field: 'EmployeeImage',
headerText: 'Employee Image',
textAlign: 'Center',
template: '#template',
width: 150,
},

],


This works (you just need one column - it doesn't matter what it is):


columns: [
{
field: 'EmployeeImage',
headerText: 'Employee Image',
textAlign: 'Center',
template: '#template',
width: 150,
},

{ field: 'FirstName', headerText: 'Name', width: 120 },

],


Edit 2: I would add, even knowing all of this and downgrading our script and having multiple columns, we still get the width error. I am working on a stripped down version to see if I can get mine to export at all.

Edit 3: Big discovery. It matters that you have a non-image column AFTER the image column. If you do not, it will not export, but if you do, it will export. I confirmed that that is the sole issue. 57+ requires at least one non image column after an image column where 56- doesn't. To clarify, if you put the extra column before the image column, it throws an error on 57+, but simply putting it after the image column, it will export.


Edit 4: Super huge discovery and definitely a bug. The reason why is it sets the width property (because it exists already) for the next column in Excel. The image is squished while the column immediately to the right of the image is the correct size. So it appears the indexes are off.


Edit 5: Confirmed in your stackblitz. Change the version to 57+ and run this code below. When you export to Excel, the image is all squished and the name column is 500px wide. If you remove the width property from FirstName column, it will error.  Finally, for it all to work, every column MUST have a width if you are doing multiple columns - this includes columns before the image.


var firstGrid = new ej.grids.Grid({
dataSource: new ej.data.DataManager(window.employeeData).executeLocal(
new ej.data.Query().take(8)
),
allowExcelExport: true,
toolbar: ['ExcelExport'],
columns: [
{
field: 'EmployeeImage',
headerText: 'Employee Image',
textAlign: 'Center',
template: '#template',
width: 150,
},

{ field: 'FirstName', headerText: 'Name', width: 120 },

],
width: 'auto',
height: 359,
});

firstGrid.toolbarClick = function (args) {
firstGrid.excelExport();
};
function exportQueryCellInfo(args) {
if (args.column.field === 'EmployeeImage') {
args.image = {
height: 248,
base64: args.data.EmployeeImage.substr(
args.data.EmployeeImage.indexOf(',') + 1
),
width: 500,
};
console.log(args.image);
}
}
firstGrid.excelQueryCellInfo = exportQueryCellInfo;
firstGrid.appendTo('#FirstGrid');


MA Mark June 23, 2022 04:09 PM UTC

I am creating a new post to summarize as I have it working on my machine now, but there is clearly a bug OR its not documented the new way as the issue only appears on 57+ where the unmodified code works fine on 56-.


In short, to export an image, every column defined must have a width specified in the columns array AND you must have a non-image column after an image column - it can be the very last column and you don't need one after every image, just the grids last column must be a non-image field.


VB Vinitha Balasubramanian Syncfusion Team June 23, 2022 06:46 PM UTC

Hi Mark,


Currently we are working your query and we will update further details on June 27, 2022.


until then we appreciate your patience.


Regards,

Vinitha Balasubramanian


MA Mark June 29, 2022 11:51 PM UTC

Hello,


Any success on this?


Thank you


JC Joseph Christ Nithin Issack Syncfusion Team July 1, 2022 01:36 AM UTC

Hi Mark,


Sorry for the inconvenience caused.


Currently we are working your query and we will update further details on July 6th, 2022. Until then we appreciate your patience.


Regards,

Joseph I


VB Vinitha Balasubramanian Syncfusion Team July 8, 2022 05:35 PM UTC

Hi Mark,


Sorry for the inconvenience caused.


We need some more time to validate your query and we will update further details on July 13th, 2022.


Until then, we appreciate your patience.


Regards

Vinitha Balasubramanian


MA Mark July 8, 2022 06:09 PM UTC

Thank you.  We will stand by. 


VB Vinitha Balasubramanian Syncfusion Team July 12, 2022 01:27 PM UTC

Hi Mark,


Thanks for your patience.


We have created a sample based on details you have shared with us. On that sample, we were not able to reproduce your reported problem on performing excelExport.


Kindly refer the code and sample for your reference.


[index.js]

function exportQueryCellInfo(args) {

  if (args.column.field === 'EmployeeImage' && args.data.EmployeeImage) {

    args.image = {

      height: 248,

      base64: args.data.EmployeeImage.substr(

        args.data.EmployeeImage.indexOf(',') + 1

      ),

      width: 300,

    };

    console.log(args.image);

  }

}


Sample link : https://stackblitz.com/edit/htunrg-6bj1gz?file=index.js,index.html


If it doesn’t meet your requirement, kindly replicate your reported problem in our provided sample.


Regards,

Vinitha Balasubramanian


MA Mark July 18, 2022 01:42 PM UTC

Sorry for the long delay in responding.  Using your stackblitz with only the following change, causes your stackblitz to break.  The issue is real - I forked your blitz to give you a breaking example.


columns: [

    {
      field: 'EmployeeID',
      headerText: 'Employee ID',
      textAlign: 'Right',
    
    },
    { field: 'FirstName', headerText: 'Name',  },
    { field: 'Title', headerText: 'Title', },
    {
      field: 'HireDate',
      headerText: 'Hire Date',
      textAlign: 'Right',
   
      format: { skeleton: 'yMd', type: 'date' },
    },
    {
      field: 'ReportsTo',
      headerText: 'Reports To',

      textAlign: 'Right',
    },
    {
      field: 'EmployeeImage',
      headerText: 'Employee Image',
      textAlign: 'Center',
      template: '#template',
      width: 150,
    },
  ],


https://stackblitz.com/edit/htunrg-2j3rjx?file=index.js


So to summarize, if the image field is the last column with a width and the other columns don't have widths (or as I stated completely above), Excel Export breaks.


JC Joseph Christ Nithin Issack Syncfusion Team July 21, 2022 06:46 PM UTC

Hi Mark,


Sorry for the late reply.



We have logged the reported issue as a bug from our side. We will provide the details on the bug and the timeline by tomorrow. We appreciate your patience until then.


Regards,

Joseph I.




VB Vinitha Balasubramanian Syncfusion Team July 22, 2022 04:47 AM UTC

Hi Mark,


Thanks for the patience.

 

We have confirmed this as an issue and logged the defect report “Excel export action breaks while using image column” for the same. Thank you for taking time to report this issue and helping us to improve our product. At Syncfusion, we are committed to fix all validated defects (subject to technological feasibility and Product Development Life Cycle) and this fix will be included in our upcoming patch release which is expected to be rolled out on 13th Aug 2022.

 

You can now track the current status of your request, review the proposed resolution timeline and contact us for any further inquiries through the below link.       

 

https://www.syncfusion.com/feedback/36490/excel-export-action-breaks-while-using-image-column

 

Until then we appreciate your patience.

 

Regards.

Vinitha Balasubramanian


VB Vinitha Balasubramanian Syncfusion Team August 16, 2022 02:02 PM UTC

Hi Mark,


Due to some complexities, we could not include the fix for (“Excel export action breaks while using image column”) this issue as promised. We are currently working on it with high priority and will include it in our upcoming release scheduled to be rolled out by Aug 24 th, 2022.


We apologize for the inconvenience caused and appreciate your patience until then.


Regards,

Vinitha Balasubramanian


JC Joseph Christ Nithin Issack Syncfusion Team September 6, 2022 08:29 PM UTC

Hi Mark,


  We appreciate your patience.


We are glad to announce that fix for the issue “Excel export action breaks while using image column” has been rolled out in our weekly patch release. We request you to update to the version "20.2.48" to resolve the problem.


Release notes link:- https://ej2.syncfusion.com/documentation/release-notes/20.2.48/?type=all#grid


Please get back to us if you need any further assistance.


Regards,

Joseph I.


Loader.
Up arrow icon