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.
|
[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 ;
}
}
|
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.
|
...
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",
...
} ] ); |
|
<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, "");
}
}
|
|
@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;
}
}
|
|
<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' };
}
|
|
<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' };
}
|
|
<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}'
}]
}]
}
|
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.
Help documentation : https://ej2.syncfusion.com/documentation/grid/aggregates/?no-cache=1#footer-aggregate
Regards,Thavasianand S.
|
this.aggreagtes = [{
columns: [
{
type: 'Sum',
field: 'Freight',
format: 'N2',
groupFooterTemplate: 'Sum: ${Sum}'
}]
}]
|
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 filterIn 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,
We have an option to customize excel cell value while exporting. You can achieve this by using the excelQueryCellInfo event of Grid.
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 checkboxBy 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]
Query5: How to Include the row colors in the exported dataWe 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.
Regards,Thavasianand S.
|
[ts]
import { ..., DataUtil} from '@syncfusion/ej2-data';
...
@Component({
...
})
export class FetchDataComponent {
...
ngOnInit(): void {
DataUtil.serverTimezoneOffset = 0;
this.parentData = new DataManager({
...
});
...
}
}
|
|
<e-column field='OrderDate' headerText='Order Date' width='230' type='date' [format]='formatOptions' textAlign='Right'></e-column>
|
