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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

csvExport

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
loading
Tags: Grid
sunithra
Asked On July 10, 2019 01:57 PM UTC

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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 11, 2019 09:19 AM UTC


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. 


sunithra
Replied On July 12, 2019 09:35 AM UTC


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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 15, 2019 09:00 AM UTC

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. 


sunithra
Replied On July 23, 2019 10:53 AM UTC

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On July 24, 2019 02:06 PM UTC

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. 


sunithra
Replied On July 25, 2019 03:42 PM UTC

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On July 26, 2019 11:45 AM UTC

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. 


sunithra
Replied On July 26, 2019 12:14 PM UTC

Hi

Thanks .Its working fine.

Regards,

Sunithra.C

Hariharan J V [Syncfusion]
Replied On July 29, 2019 05:41 AM UTC

Hi Sunithra,

Thanks for your update.

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

Regards,
Hariharan

sunithra
Replied On August 14, 2019 06:49 AM UTC

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

Kuralarasan Muthusamy [Syncfusion]
Replied On August 15, 2019 09:36 AM UTC

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 


sunithra
Replied On August 16, 2019 02:47 PM UTC

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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On August 19, 2019 01:54 PM UTC

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. 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon