We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Row Span in exported files

Thread ID:

Created:

Updated:

Platform:

Replies:

143410 Mar 19,2019 02:18 PM UTC Jun 17,2019 10:15 AM UTC Angular - EJ 2 13
loading
Tags: Grid
Sahal
Asked On March 19, 2019 02:18 PM UTC

Hi.

When I export a gird with row or col span it is not reflected in the exported Excel/pdf file. Is there a way to achieve it.

I would like to have the cells merged as it shows on the grid




Thavasianand Sankaranarayanan [Syncfusion]
Replied On March 20, 2019 05:52 AM UTC

Hi Sahal, 
 
Greetings from Syncfusion support. 

We have validated your query as you provided information. We have created a sample with exporting(Excel, Pdf) the EJ2 Grid cells merged in Angular framework. In the below code example, we have achieved the excel export and pdf export with cell merging by using the “pdfQueryCellInfo” and “excelQueryCellInfo” events of the EJ2 grid. Please refer the below code example for more information. 
 
 
[local-data.html] 
 
<ejs-grid [dataSource]='data' #grid allowPaging='true' [pageSettings]='pageSettings' allowExcelExport='true' allowPdfExport='true' [toolbar]='toolbarOption' (toolbarClick)='toolbarClick($event)' (excelQueryCellInfo)='excelQueryCellInfo($event)' 
          (pdfQueryCellInfo)='pdfQueryCellInfo($event)' (pdfExportComplete)='pdfExportComplete($event)' (excelExportComplete)='excelExportComplete($event)' (dataBound)='dataBound($event)' (rowDataBound)="rowDataBound($event)"> 
    <e-columns> 
         
           ----- 
 
    </e-columns> 
</ejs-grid> 
 
-------------------------------------------------------------------------------------------------------------------------- 
[local-data.component.ts] 
 
excelQueryCellInfo = function(args: ExcelQueryCellInfoEventArgs){ 
 
       -------- 
       
      } else if(ValOfOrderID !== args.data["OrderID"] && args.column.field == "OrderID") { 
        (gridcells as ExcelCell).rowSpan = i; // Repeated cells are merged here 
        ValOfOrderID = args.data["OrderID"]; 
        gridcells=(args.cell as ExcelCell); 
        i=1 ; 
      } 
    } 
     
     
    pdfQueryCellInfo=function(args: PdfQueryCellInfoEventArgs){ 
 
       ----- 
 
      } else if(ValOfOrderID_PDF !== args.data["OrderID"] && args.column.field == "OrderID") { 
        (pdfGridcell as PdfGridCell).rowSpan = pdfCellindex as any; // Repeated cells are merged here 
        ValOfOrderID_PDF = args.data["OrderID"]; 
        pdfGridcell=(args.cell as PdfGridCell); 
        pdfCellindex = 1 ; 
      } 
    } 
 
 
 
Refer the help documentation. 
 
 
 
 
 
Please get back to us, if you need further assistance,  
 
Regards,  
Thavasianand S. 


Gangabharathy Murugasen [Syncfusion]
Replied On March 27, 2019 12:11 PM UTC

Hi  
I had earlier faced the same issue when trying to reply to the thread. 
"You have tried to enter a word or URL that is not allowed on this site. If you believe that this is inaccurate, please contact us at support@syncfusion.com.

Please fix and add the following to a the thread https://www.syncfusion.com/forums/143410/row-span-in-exported-files  

Please Do notify assigned support agent so that I get a timely response 

Thank you for the update. 
A couple of issues while exporting 
I have a date column which is loaded from the server in the format"2019-03-27T08:52:54.537Z" 
The column is declared as 
  • <e-column field='Date' headerText='Date' width=90 clipMode='EllipsisWithTooltip' type='datetime'
[format]='formatOptions'>e-column> 
  • formatOptions = { type: 'date'format: 'dd/MM/yyyy' };
The grid shows the date is the expected format with only the date part 
1.When exporting to PDF I get an error 
core.js:1673 ERROR Error: Uncaught (in promise): TypeError: value.getDate is not a function 
TypeError: value.getDate is not a function 
at date-formatter.js:93 
at pdf-export.js:125 
at new ZoneAwarePromise (zone.js:910) 
at pdf-export.js:109 
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391) 
at resolvePromise (zone.js:831) 
at resolvePromise (zone.js:788) 
at zone.js:892 
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) 
at Object.onInvokeTask (core.js:3811) 
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) 
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) 
at drainMicroTaskQueue (zone.js:601) 
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:502) 
at ZoneTask.invoke (zone.js:487) 
2. Similar error occurs when I try to filter the column using the built in excel filter 
core.js:1673 ERROR Error: Uncaught (in promise): TypeError: value.getDate is not a function 
TypeError: value.getDate is not a function 
at date-formatter.js:93 
at checkbox-filter.js:553 
at Array.forEach () 
at checkbox-filter.js:552 
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391) 
at Object.onInvoke (core.js:3820) 
at resolvePromise (zone.js:831) 
at zone.js:896 
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) 
at Object.onInvokeTask (core.js:3811) 
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) 
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) 
at drainMicroTaskQueue (zone.js:601) 
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:502) 
at ZoneTask.invoke (zone.js:487) 
at timer (zone.js:2281) 
 
3.When exporting to excel the column has the time part (with time values set to zero) . How do I export with the date part only 
 
4.Another Issue I face is when the grid has around 1k rows the filter (built in excel filter) does not show all the distinct values for selecting using checkbox 
 
5.How to Include the row colors in the exported data 


Sahal
Replied On March 29, 2019 03:01 AM UTC

Hi Sahal, 
 
Greetings from Syncfusion support. 

We have validated your query as you provided information. We have created a sample with exporting(Excel, Pdf) the EJ2 Grid cells merged in Angular framework. In the below code example, we have achieved the excel export and pdf export with cell merging by using the “pdfQueryCellInfo” and “excelQueryCellInfo” events of the EJ2 grid. Please refer the below code example for more information. 
 
 
[local-data.html] 
 
<ejs-grid [dataSource]='data' #grid allowPaging='true' [pageSettings]='pageSettings' allowExcelExport='true' allowPdfExport='true' [toolbar]='toolbarOption' (toolbarClick)='toolbarClick($event)' (excelQueryCellInfo)='excelQueryCellInfo($event)' 
          (pdfQueryCellInfo)='pdfQueryCellInfo($event)' (pdfExportComplete)='pdfExportComplete($event)' (excelExportComplete)='excelExportComplete($event)' (dataBound)='dataBound($event)' (rowDataBound)="rowDataBound($event)"> 
    <e-columns> 
         
           ----- 
 
    </e-columns> 
</ejs-grid> 
 
-------------------------------------------------------------------------------------------------------------------------- 
[local-data.component.ts] 
 
excelQueryCellInfo = function(args: ExcelQueryCellInfoEventArgs){ 
 
       -------- 
       
      } else if(ValOfOrderID !== args.data["OrderID"] && args.column.field == "OrderID") { 
        (gridcells as ExcelCell).rowSpan = i; // Repeated cells are merged here 
        ValOfOrderID = args.data["OrderID"]; 
        gridcells=(args.cell as ExcelCell); 
        i=1 ; 
      } 
    } 
     
     
    pdfQueryCellInfo=function(args: PdfQueryCellInfoEventArgs){ 
 
       ----- 
 
      } else if(ValOfOrderID_PDF !== args.data["OrderID"] && args.column.field == "OrderID") { 
        (pdfGridcell as PdfGridCell).rowSpan = pdfCellindex as any; // Repeated cells are merged here 
        ValOfOrderID_PDF = args.data["OrderID"]; 
        pdfGridcell=(args.cell as PdfGridCell); 
        pdfCellindex = 1 ; 
      } 
    } 
 
 
 
Refer the help documentation. 
 
 
 
 
 
Please get back to us, if you need further assistance,  
 
Regards,  
Thavasianand S. 


Could anyone provide an update on this

Thavasianand Sankaranarayanan [Syncfusion]
Replied On March 29, 2019 04:20 AM UTC

Hi Sahal, 

Thanks for your update. 

Query 1: I had earlier faced the same issue when trying to reply to the thread.  
 
We have resolved the problem, now you can reply without any issue 

Query 2: When exporting to PDF I get an error & Similar error occurs when I try to filter the column using the built in excel filter 
 
In your application, you are binding date column value as string type but grid expects value as date object to perform filter and export so we suggest you to format the grid data with DataUtil.parse.parseJson method.  

Please refer to the below sample and code snippet for your reference, 
... 
import { DataManager, DataUtil } from "@syncfusion/ej2-data"; 
... 
export class AppComponent implements OnInit { 
  data = DataUtil.parse.parseJson([ 
    { 
      "projects_ProjectID": "1d37d04c-3f19-11e9-8d5a-90b11c61d394", 
      "projects_Description": "teamconnect", 
... 
 
} ] ); 
 
Query3: When exporting to excel the column has the time part (with time values set to zero) . How do I export with the date part only  

We have an option to customize excel cell value while exporting. You can achieve this by using the excelQueryCellInfo event of Grid.  

<div class="control-section"> 
    <ejs-grid #grid [dataSource]='data' [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)' 
                [allowExcelExport]='true'(excelQueryCellInfo)='excelQueryCellInfo($event)'> 
        <e-columns> 
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true'></e-column> 
            <e-column field='CustomerID' headerText='Customer ID' width='120'></e-column>           
        </e-columns> 
    </ejs-grid> 
</div> 


export class ExportingComponent implements OnInit { 
 
  public ngOnInit(): void { 
  . . . . . 
  excelQueryCellInfo(args: any) { 
      if (args.column.field === 'OrderDate') { 
          // you can customize date value as per your requirement. 
          args.value = args.value.replace(/<\/?[^>]+(>|$)/g, ""); 
    } 
} 


Query4: Another Issue I face is when the grid has around 1k rows the filter (built in excel filter) does not show all the distinct values for selecting using checkbox 
 
By default, In excel filter we have limited the filter choice record count as 1000 for better performance. Could you please check and confirm whether your data source contains more than 1000 records or not. 
 
If it contains more than 1000 then we suggest you to set the filter choice record count as per your requirement (based on your data source count) by using the below way.  
 
[code example] 
 
@Component({ 
    selector: 'my-app', 
    template: `<ejs-grid [dataSource]='data' [allowFiltering] ='true' [filterSettings]='filterOptions' (actionBegin)='actionBegin($event)' allowPaging='true' [pageSettings]='pageSettings'> 
    <e-columns> 
    . . . . . .  
    </e-columns> 
    </ejs-grid>`, 
    providers: [FilterService, PageService] 
}) 
export class AppComponent implements OnInit { 
    . . . . . 
    ngOnInit(): void { 
 
        this.filterOptions = { 
            type: 'Excel' 
        }; 
    } 
 
    actionBegin(args: any): void { 
        if (args.requestType == "filterchoicerequest" || args.requestType === 'filtersearchbegin') { 
            // you can set filter choice count based on your needs , by default count 1000 
            args['filterChoiceCount'] = 2000;     
        } 
} 


Query5: How to Include the row colors in the exported data 
 
We have analyzed your requirement and you can achieve this by using the below way. In the below code example, we have bind pdfQueryCellInfo event and apply the background color for the pdf document. 

Please refer the below code example for more information. 

<ejs-grid #grid [dataSource]='data' [toolbar]='toolbar' (pdfQueryCellInfo)="pdfQueryCellInfo($event)" (toolbarClick)='toolbarClick($event)' 
[allowExcelExport]='true' [allowPdfExport]='true' > 
. . . . . 
</ejs-grid> 


  pdfQueryCellInfo(args){ 
     // you can customize and change the color as per your requirement 
    args.style = { backgroundColor: '#FFFF33' }; 
  } 


Regards, 
Thavasianand S. 


Sahal
Replied On March 29, 2019 09:20 AM UTC

Thank you for the update.

  • How do I get the rows colored for the excel export. I tried something similar to the PDF example by using excelCellQueryInfo and setting the style property. It did not work.
  • The summary is not being exported both in excel and PDF 
  • And when I export the summary is duplicated.




Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 1, 2019 07:09 AM UTC

Hi Sahal, 

Query: How do I get the rows colored for the excel export. 
 
We suggest you to use the below way to achieve your requirement. Please check the below code example for more information. 

  <ejs-grid #grid [toolbar]='toolbar' (pdfQueryCellInfo)="pdfQueryCellInfo($event)" 
    (excelQueryCellInfo)="excelQueryCellInfo($event)"  (toolbarClick)='toolbarClick($event)' 
                [allowExcelExport]='true' [allowPdfExport]='true' > 
        <e-columns> 
          . . . . . . 
        </e-columns> 
    </ejs-grid> 


excelQueryCellInfo(args){ 
  args.style = { backColor: '#FFFF33' }; 
} 

 
Query: The summary is not being exported both in excel and PDF 
 
We suggest you to use the below way to resolve the reported problem. In the below sample, we have assigned aggregate (instead of providing template) using property binding. Please check the below code example and sample for more information. 

<ejs-grid #grid [dataSource]="data" [allowPaging]="true" [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)' [allowExcelExport]='true' [allowPdfExport]=true [pageSettings]='pageOption' [aggregates]='aggreagtes' > 
  <e-columns> 
      <e-column field='OrderID' headerText='Order ID' width='150'></e-column> 
      . . . . 
  </e-columns> 
</ejs-grid> 


public ngOnInit(): void { 
  this.data = orderDatas; 
   this.toolbar = ['ExcelExport', 'PdfExport', 'CsvExport']; 
   this.aggreagtes = [{ 
      columns: [ 
      { 
          type: 'Sum', 
          field: 'Freight', 
          format: 'N2', 
          footerTemplate: 'Sum: ${Sum}' 
      }] 
  }] 
} 




Regards, 
Thavasianand S.

Sahal
Replied On April 14, 2019 11:19 AM UTC

Hi Sahal, 

Query: How do I get the rows colored for the excel export. 
 
We suggest you to use the below way to achieve your requirement. Please check the below code example for more information. 

  <ejs-grid #grid [toolbar]='toolbar' (pdfQueryCellInfo)="pdfQueryCellInfo($event)" 
    (excelQueryCellInfo)="excelQueryCellInfo($event)"  (toolbarClick)='toolbarClick($event)' 
                [allowExcelExport]='true' [allowPdfExport]='true' > 
        <e-columns> 
          . . . . . . 
        </e-columns> 
    </ejs-grid> 


excelQueryCellInfo(args){ 
  args.style = { backColor: '#FFFF33' }; 
} 

 
Query: The summary is not being exported both in excel and PDF 
 
We suggest you to use the below way to resolve the reported problem. In the below sample, we have assigned aggregate (instead of providing template) using property binding. Please check the below code example and sample for more information. 

<ejs-grid #grid [dataSource]="data" [allowPaging]="true" [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)' [allowExcelExport]='true' [allowPdfExport]=true [pageSettings]='pageOption' [aggregates]='aggreagtes' > 
  <e-columns> 
      <e-column field='OrderID' headerText='Order ID' width='150'></e-column> 
      . . . . 
  </e-columns> 
</ejs-grid> 


public ngOnInit(): void { 
  this.data = orderDatas; 
   this.toolbar = ['ExcelExport', 'PdfExport', 'CsvExport']; 
   this.aggreagtes = [{ 
      columns: [ 
      { 
          type: 'Sum', 
          field: 'Freight', 
          format: 'N2', 
          footerTemplate: 'Sum: ${Sum}' 
      }] 
  }] 
} 




Regards, 
Thavasianand S.

How can I define group footer template using property binding.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 15, 2019 06:43 AM UTC

Hi Sahal, 

Thanks for your update. 
 
Query: How can I define group footer template using property binding. 
 
You can use the below way to define group footer template in Grid. Please refer the below code example and modified sample for more information. 

this.aggreagtes = [{ 
    columns: [ 
    { 
        type: 'Sum', 
        field: 'Freight', 
        format: 'N2', 
        groupFooterTemplate: 'Sum: ${Sum}' 
    }] 
}] 



Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


Sahal
Replied On May 15, 2019 12:00 PM UTC

Hi Sahal, 

Thanks for your update. 

Query 1: I had earlier faced the same issue when trying to reply to the thread.  
 
We have resolved the problem, now you can reply without any issue 

Query 2: When exporting to PDF I get an error & Similar error occurs when I try to filter the column using the built in excel filter 
 
In your application, you are binding date column value as string type but grid expects value as date object to perform filter and export so we suggest you to format the grid data with DataUtil.parse.parseJson method.  

Please refer to the below sample and code snippet for your reference, 
... 
import { DataManager, DataUtil } from "@syncfusion/ej2-data"; 
... 
export class AppComponent implements OnInit { 
  data = DataUtil.parse.parseJson([ 
    { 
      "projects_ProjectID": "1d37d04c-3f19-11e9-8d5a-90b11c61d394", 
      "projects_Description": "teamconnect", 
... 
 
} ] ); 
 
Query3: When exporting to excel the column has the time part (with time values set to zero) . How do I export with the date part only  

We have an option to customize excel cell value while exporting. You can achieve this by using the excelQueryCellInfo event of Grid.  

<div class="control-section"> 
    <ejs-grid #grid [dataSource]='data' [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)' 
                [allowExcelExport]='true'(excelQueryCellInfo)='excelQueryCellInfo($event)'> 
        <e-columns> 
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true'></e-column> 
            <e-column field='CustomerID' headerText='Customer ID' width='120'></e-column>           
        </e-columns> 
    </ejs-grid> 
</div> 


export class ExportingComponent implements OnInit { 
 
  public ngOnInit(): void { 
  . . . . . 
  excelQueryCellInfo(args: any) { 
      if (args.column.field === 'OrderDate') { 
          // you can customize date value as per your requirement. 
          args.value = args.value.replace(/<\/?[^>]+(>|$)/g, ""); 
    } 
} 


Query4: Another Issue I face is when the grid has around 1k rows the filter (built in excel filter) does not show all the distinct values for selecting using checkbox 
 
By default, In excel filter we have limited the filter choice record count as 1000 for better performance. Could you please check and confirm whether your data source contains more than 1000 records or not. 
 
If it contains more than 1000 then we suggest you to set the filter choice record count as per your requirement (based on your data source count) by using the below way.  
 
[code example] 
 
@Component({ 
    selector: 'my-app', 
    template: `<ejs-grid [dataSource]='data' [allowFiltering] ='true' [filterSettings]='filterOptions' (actionBegin)='actionBegin($event)' allowPaging='true' [pageSettings]='pageSettings'> 
    <e-columns> 
    . . . . . .  
    </e-columns> 
    </ejs-grid>`, 
    providers: [FilterService, PageService] 
}) 
export class AppComponent implements OnInit { 
    . . . . . 
    ngOnInit(): void { 
 
        this.filterOptions = { 
            type: 'Excel' 
        }; 
    } 
 
    actionBegin(args: any): void { 
        if (args.requestType == "filterchoicerequest" || args.requestType === 'filtersearchbegin') { 
            // you can set filter choice count based on your needs , by default count 1000 
            args['filterChoiceCount'] = 2000;     
        } 
} 


Query5: How to Include the row colors in the exported data 
 
We have analyzed your requirement and you can achieve this by using the below way. In the below code example, we have bind pdfQueryCellInfo event and apply the background color for the pdf document. 

Please refer the below code example for more information. 

<ejs-grid #grid [dataSource]='data' [toolbar]='toolbar' (pdfQueryCellInfo)="pdfQueryCellInfo($event)" (toolbarClick)='toolbarClick($event)' 
[allowExcelExport]='true' [allowPdfExport]='true' > 
. . . . . 
</ejs-grid> 


  pdfQueryCellInfo(args){ 
     // you can customize and change the color as per your requirement 
    args.style = { backgroundColor: '#FFFF33' }; 
  } 


Regards, 
Thavasianand S. 


Hi,

To solve the issue Query 2: When exporting to PDF I get an error & Similar error occurs when I try to filter the column using the built in excel filter  you suggested to use DataUtil.parse.parseJson method.

There is an issue when using this method. The timezone information is messed up by this function. The server returns the datetime in UTC format like ("2019-05-14T21:08:50.650Z") The parse method is creating the a date object with the local timezone without converting it to  local time. Please let me know if there is a workaround or how to fix the  bug

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 16, 2019 06:41 AM UTC

Hi Sahal, 

Thanks for your update. 

Query: The server returns the datetime in UTC format like ("2019-05-14T21:08:50.650Z") The parse method is creating the a date object with the local timezone without converting it to  local time. 

We suggest you to apply the serverTimezoneOffset as 0 to disable client side time zone conversion. Please refer the below code example for more information. 

[ts] 
 
import { ..., DataUtil} from '@syncfusion/ej2-data'; 
... 
 
@Component({ 
    ... 
}) 
export class FetchDataComponent { 
    ... 
    ngOnInit(): void { 
       DataUtil.serverTimezoneOffset = 0;  
       this.parentData = new DataManager({ 
            ... 
       }); 
        ... 
    } 
} 


Regards, 
Thavasianand S. 


Sahal
Replied On May 16, 2019 07:04 AM UTC

That doesn't solve the issue. Doing so the result is as follows

2019-05-15T18:36:36.817Z is converted to Wed May 15 2019 13:06:36 GMT+0530 (India Standard Time) 
It should actually  convert to Wed May 16 2019 00:06:36 GMT+0530 (India Standard Time) 

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 20, 2019 10:26 AM UTC

Hi Sahal, 

We have validated the provided information and checked with our end. We suggest you to apply the column type as date to resolve the reported problem. Please refer the below code example for more information. 

<e-column field='OrderDate' headerText='Order Date' width='230' type='date' [format]='formatOptions' textAlign='Right'></e-column> 



But when apply type as date is not working in pdf export so we have considered “Script error is thrown when exporting pdf document with UTC date value in Grid” as a bug and logged a report for the same. We will include the fix and it will be available on June 6th, 2019 Patch release. 
 
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:  

Until then we appreciate your patience. 

Regards, 
Thavasianand S. 


Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 17, 2019 10:15 AM UTC

Hi Sahal, 
Thanks for your patience. 
 
We are glad to announce that our latest patch release (17.1.51) has been rolled out successfully and in that release, we have added the fix for the issue Script error is thrown when exporting pdf document with UTC date value in Grid. 
 
Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;