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.
New Product Launch - BoldDesk !
Introducing help desk ticketing software.
New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.|
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))
|
