Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 145844 | Jul 10,2019 01:57 PM UTC | Aug 19,2019 01:54 PM UTC | Angular - EJ 2 | 13 |
|
Tags: Grid |
|
App.component.ts
toolbarClick(args: ClickEventArgs): void {
if (args.item.text == 'CSV Export') {
// store the columns in Grid
this.gridColumns = this.grid.getColumns();
//push the columns to be exported and not in grid columnModel
(this.grid.columns as any).push({ field: "ShipCity" }, { field: "CustomerName" });
this.grid.refreshColumns();
this.grid.csvExport().then((e) => {
//after eporting replace the grid columns with stored columns
this.grid.columns = this.gridColumns;
});
}
} |
Hi sunithra,
Thanks for contacting Syncfusion support.
we have validated your requirement. You can achieve your requirement in below way. Please find the below code snippet and sample for your reference.
if (args.item.text == 'CSV Export') {// store the columns in Gridthis.gridColumns = this.grid.getColumns();//push the columns to be exported and not in grid columnModel(this.grid.columns as any).push({ field: "ShipCity" }, { field: "CustomerName" });this.grid.refreshColumns();this.grid.csvExport().then((e) => {//after eporting replace the grid columns with stored columnsthis.grid.columns = this.gridColumns;});}}
Please get back to us, if you need further assistance.
Regards,Thavasianand S.
|
App.component.ts
toolbarClick(args: ClickEventArgs): void {
if (args.item.text == 'CSV Export') {
// store the columns in Grid
this.gridColumns = this.grid.getColumns();
//push the columns to be exported and not in grid columns
(this.grid.columns as any).push({ field: "ShipCity" }, { field: "CustomerName" });
this.grid.refreshColumns();
this.grid.csvExport().then((e) => {
//after eporting replace the grid columns with stored columns
this.grid.columns = this.gridColumns;
this.grid.refreshColumns(); // refresh the columns after changing the columns
});
}
} |
|
App.component.html
<div class="control-section">
<ejs-grid #grid [dataSource]='data' allowPaging='true' (beforeExcelExport)='beforeExcelExport($event)' [pageSettings]='pageSettings' [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)'
[allowExcelExport]='true' [allowPdfExport]='true' >
<e-columns>
. . .
</ejs-grid>
</div> |
|
App.component.ts
import { prepareColumns} from '@syncfusion/ej2-angular-grids';
export class AppComponent {
public data: Object[];
public toolbar: string[];
public pageSettings: Object;
public refresh: Boolean;
@ViewChild('grid', {static: true})
public grid: GridComponent;
public gridColumns: Object[];
public ngOnInit(): void {
this.data = orderDetails;
this.toolbar = ['CsvExport'];
this.pageSettings = { pageCount: 5 };
}
toolbarClick(args: ClickEventArgs): void {
if (args.item.text == 'CSV Export') {
this.gridColumns = this.grid.getColumns(); //store the initial columns in Grid
this.grid.csvExport().then((e)=>{
//after exporting complete restore the initial order
this.grid.columns=this.gridColumns;
prepareColumns(this.grid.columns);
});
}
}
beforeExcelExport(e){
e.gridObject.columns.push({field:"ShipCity"}, { field: "CustomerName" }) //push the additional columns
prepareColumns( e.gridObject.columns); //refresh the columns Object
}
} |
|
toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'Grid_csvexport') {
let query: Query = this.grid.renderModule.data.generateQuery(false);
query.queries.splice(1, 1);
this.grid.getDataModule().getData((this.grid as any).dataSource, query).then(function (e: { result: object[] }) {
const excelExportProperties: ExcelExportProperties = {
dataSource: e.result // filtered records
};
this.grid.csvExport(excelExportProperties);
}.bind(this))
}
} |
|
[app.component.html]
<button id="export" ejs-button>Export</button>`
<ejs-grid id="Grid" #grid [dataSource]='data' allowPaging='true' [toolbar]='toolbar'
[allowExcelExport]='true' allowFiltering='true' [filterSettings]='filterSettings' [allowPdfExport]='true' >
<e-columns>
-------
</e-columns>
</ejs-grid>
--------------------------------------------------------------------
[app.component.ts]
document.getElementById('export').addEventListener('click', function (args) {
// Here we have export the filtered record
if (this.grid.filterSettings.columns.length > 0) {
let query: Query = this.grid.renderModule.data.generateQuery(false);
query.queries.splice(1, 1);
this.grid.getDataModule().getData((this.grid as any).dataSource, query).then(function (e: { result: object[] }) {
const excelExportProperties: ExcelExportProperties = {
dataSource: e.result
}
this.grid.csvExport(excelExportProperties);
}.bind(this))
}
// Here we have export the selected record
else if (this.grid.getSelectedRecords().length > 0) {
let data = this.grid.getSelectedRecords();
const excelExportProperties: ExcelExportProperties = {
dataSource: data
}
this.grid.csvExport(excelExportProperties);
}
// Here we have export all the records
else
this.grid.csvExport();
}.bind(this))
|
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.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
