Excel export

[Edson Rodríguez]

Hi,

I was following your example about excel export but doesn´t work for me. It sends me this message  ERROR TypeError: Cannot read property 'excelExport' of undefined. I just followed the steps, also I  want to know how to export the filtered data. Here are my codes.

HTML

<ejs-grid [allowFiltering]='true' width=auto [dataSource]="ListValor" [filterSettings]='filtro' [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)' [allowExcelExport]='true' [allowGrouping]="true" >

                    <e-columns>

                      <e-column field='Machine' headerText='Máq.' width='105' ></e-column>

                      <e-column field='Code' headerText='Código' width='130'></e-column>

                      <e-column field='Description' headerText='Descripción' width='350'></e-column>

                      <e-column field='CycleTimeEstimated' headerText='T/C Est.' width='125'></e-column>

                      <e-column field='CycleTimeReal' headerText='T/C Real' width='130'></e-column>

                      <e-column field='CavityReal' headerText='Cav.' width='105'></e-column>

                      <e-column field='ProductionPlan' headerText='Plan' width='110'></e-column>

                      <e-column field='ProductionReal' headerText='Prod.' width='110'></e-column>

                      <e-column field='Defects' headerText='Defecto' width='125'></e-column>

                      <e-column field='TotalProduction' headerText='Prod. Total' width='140'></e-column>

                      <e-column field='Accomplishment' headerText='%' width='100'></e-column>

                      <e-column field='TotalStand' headerText='T/P' width='110'></e-column>

                      <e-column field='TotalStand' headerText='Status' width='115'></e-column>

                      <e-column field='Cause' headerText='Causa' width='150'></e-column>

                      <e-column field='WorkShift' headerText='Turno' width='150'></e-column>

                      <e-column field='Date' headerText='Fecha' width='150'></e-column>

                    </e-columns>

              </ejs-grid>

TS

public data: Object[];

  public toolbar: string[];

  public refresh: Boolean;

  public grid: GridComponent;

public filtro : FilterSettingsModel ={

    ignoreAccent: true,

    type:"Excel"

   }

toolbarClick(args){

  this.grid.excelExport();

  }

[Sujith Kumar Rajkumar]

Hi Edson, 

 

Greetings from Syncfusion support. 

 

We checked your reported problem with the provided code snippet and could see that you have not properly accessed the grid component instance using angular ViewChild. Due to this the grid instance will not be available on executing this line – “this.grid.excelExport();”. So you need to reference the grid component like below to access its instance, 

 

app.component.html 

<ejs-grid #grid [dataSource]='gridData' [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)'> 

</ejs-grid> 

 

app.component.ts 

@ViewChild('grid') 

public grid: GridComponent; 

 

toolbarClick(args: ClickEventArgs): void { 

        if (args.item.text === "Excel Export") { 

                this.grid.excelExport(); 

        } 

} 

 

We have prepared a sample based on this for your reference which you can find below, 

 

Sample: https://stackblitz.com/edit/angular-vpyqqf?file=app.component.ts 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Edson Rodríguez]

Now I have this:

Failed to compile.

src/app/data/data.component.ts:21:21 - error TS1146: Declaration expected. 21 @ViewChild('grid');

and the problem in that line is Expected 2 arguments, but got 1.

By the way I'm using angular 8, I really appreciate your help

[Edson Rodríguez]

Now I have this:

Failed to compile.

src/app/data/data.component.ts:21:21 - error TS1146: Declaration expected. 21 @ViewChild('grid');

and the problem in that line is Expected 2 arguments, but got 1.

By the way I'm using angular 8, I really appreciate your help

I already solve the problem with:

@ViewChild('grid',{static: false}) grid: GridComponent; 

Thank you very much for your support.

[Sujith Kumar Rajkumar]

Hi Edson, 

We are glad to hear that your problem has been resolved. 

Please get back to us if you require any further assistance. 

Regards, 

Sujith R