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. Image for the cookie policy date

csvExport

Hi

Using csv Export for downloading the Grid data , want to add new addtional columns without affecting the grid .

How to add the additional columns ?

For Example Have 10 columns in datasource, but show only 5 columns in grid. want to csv export 10 columns .

without using visibility option ( [visible]=false ).



Thanks in Advance.

Regards,

Sunithra.C

13 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team July 11, 2019 01:19 AM


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.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; 
      }); 
    } 
  } 


Please get back to us, if you need further assistance. 

Regards, 
Thavasianand S. 



SU sunithra replied to Thavasianand Sankaranarayanan July 12, 2019 01:35 AM


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.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; 
      }); 
    } 
  } 


Please get back to us, if you need further assistance. 

Regards, 
Thavasianand S. 


Hi

after exporting the data in grid the grid is getting missaligned and after refreshing the grid is back to normal .here with attached a screenshot for your reference .



Regards,

Sunithra.C

Attachment: sample_beecdb5a.zip


TS Thavasianand Sankaranarayanan Syncfusion Team July 15, 2019 01:00 AM

Hi sunithra, 

Thanks for the update. 

We have validated your requirement. We suggest you to invoke the refreshColumns after changing the columns to resolve the misalignment. 
Please find the below code snippet and sample for more information. 

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 
      }); 
    } 
  } 


Please get back to us, if you need further assistance. 

Regards, 
Thavasianand S. 



SU sunithra July 23, 2019 02:53 AM

Hi

I'am facing issue when i do export,Kindly do the needful on this,When i click on Export button in the Grid page which its having Columns & Rows is get shrinked . 

check the below link 

https://stackblitz.com/edit/angular-145844-scv-export?file=app.component.ts


Regards,

sunithra.c


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 24, 2019 06:06 AM

Hi Sunithra,  

We are unable to reproduce the reported problem at our end. The columns were not shrunk after exporting in the Grid content as well as in the exported document. Could you please share the screenshot? 

Regards,  
Seeni Sakthi Kumar S. 



SU sunithra July 25, 2019 07:42 AM

Hi

Still we have facing that shake/shrink problem from our side, so we attached a sample code for  your reference.


Regards,

Sunithra.C

Attachment: angular145844scvexport_75cb5deb.zip


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 26, 2019 03:45 AM

Hi Sunithra, 

Thanks for your update and sharing the sample. 

We can reproduce the reported problem at our end. The cause of the problem is the refreshColumns method called anonymously. In order to avoid the flickering we have used prepareColumns method which will refresh only the columns object of the Grid. 

Please find the below code snippet and sample for more information. 

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  
  } 
} 


Please get back to us, if you need further assistance. 


Regards, 
Seeni Sakthi Kumar S. 



SU sunithra July 26, 2019 04:14 AM

Hi

Thanks .Its working fine.

Regards,

Sunithra.C


HJ Hariharan J V Syncfusion Team July 28, 2019 09:41 PM

Hi Sunithra,

Thanks for your update.

We are happy to hear that your issue has been resolved.

Regards,
Hariharan


SU sunithra August 13, 2019 10:49 PM

Hi

I need an help to bind the records from the Grid which i have selected by using check box and by sorting using filters,with the help of these two options i have to Export the records which its showing on the Grid. So i need your help to find the records which i have selected by using check box & by using sorting by click on the Export button the file will get created, for your reference i have attached the screen shot with checked details & by using sorting.

Thanks in Advance .

Regards,

Sunithra.C

Attachment: sample_17c517.zip


KM Kuralarasan Muthusamy Syncfusion Team August 15, 2019 01:36 AM

Hi Sunithra, 
 
From your query, we suspect that you want to provide the filtered records only to export action. You can achieve this requirement like as below code snippet, 
 
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)) 
    } 
  } 
 
For your convenience we have prepared the sample to export the filtered records and you can find that sample from the below link, 
 
 
If we misunderstood your query, please share more details about your requirement for further assistance. 
 
Regards, 
Kuralarasan M 



SU sunithra August 16, 2019 06:47 AM

Hi
before clicking the export button i need to check 3 conditions based on the condition the resulting data must be exported without using toolbar in grid since we have a click button seperately in the top
1. if the particular records are selected in grid then only that selected record (using checkbox selection) must be exported
2.if the record is filtered using filter in grid then only the filtered record must be exported
3.if none of the row is selected  or  filtered then all the record must be exported  now i am binding only 20 data in datasouce i also need to export more data which is not binded in datasource 
 And also only few columns we are showing in the grid i need to export all the fields from datasource including the fileds which is not shown in datasource

Regards,

Sunithra.C

Attachment: sample_17c517_417e626f.zip


TS Thavasianand Sankaranarayanan Syncfusion Team August 19, 2019 05:54 AM

Hi Sunithra, 

Query 1: Need to export the selected record in Grid when we have selected record and Need to export the filtered record in Grid when we have filtered record. If both operation are not performed then we need to export all the record of Grid. 

In the below code example we have export the grid based on the selected/filtered the record. 

[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)) 


We have prepared a simple sample in the following link. 


Query 2: Need to export the column which is not shown in Grid.  

We have already discuss about the query in the following documentation. 



Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon