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.
App.component.tstoolbarClick(args: ClickEventArgs): void {
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))
|