how to create viewchild of dynamic grids having dynamic id

[Namita]

hi

in html, code is:-

<ejs-tab #tabs heightAdjustMode='Auto' (selected)='onTabSelect($event)'>

  <e-tabitems>

    <div *ngFor="let item of TabsDetails">

      <e-tabitem [header]="{ 'text': item.Label }">

        <ng-template #content>

          <div *ngIf="item.IsBranch"><img src={{iconImageSource}} (click)="fnBranchPopUp(item.Id)" /></div>

          <ejs-grid id={{item.name}} [dataSource]='gridDataSource' rowHeight='38' [allowSelection]='true'

                    [allowPaging]='true' height='auto' width="1000px"

                    [toolbar]='toolbar' (toolbarClick)='clickHandler($event)' (rowSelected)='rowSelected($event)'

                    [contextMenuItems]='contextMenuItems' (contextMenuClick)='contextMenuClick($event)'

                    allowSorting='true' showColumnMenu='true' allowFiltering='true'

                    [filterSettings]='filterSettings' allowReordering="true">

                    

            <e-columns>

              <!--<e-column headerText="Actions" field="Actions" [filter]='filterSettings' width='230'></e-column>-->

              <e-column type='checkbox' width='50'></e-column>

              <!--for printing Grid columns-->

              <div *ngFor="let item of gridColumns">

                <e-column [field]="item.Label" [headerText]="item.Label" width='230'></e-column>

              </div>

            </e-columns>

          </ejs-grid>

        </ng-template>

      </e-tabitem>

    </div>

  </e-tabitems>

</ejs-tab>

now I need to create viewchild of grid, but not able to undrstand how, I want to get getselectedRows ad also implement some toolbar actions like csvExport,pdfExport etc.

Please help

[Thiyagu Subramani]

Hi Namita, 

Thanks for conducting Syncfusion Forum. 

Based on your requirement we have created viewChild for grid and performed toolbar actions(Pdf export , Excel export, Csv export) and get selected records while selecting a grid row using rowSelected event. Please refer to the below code and sample. 

[app.component.html] 

  

<ejs-tab id="tab_default" heightAdjustMode='Auto'> 

      <e-tabitems> 

        <e-tabitem [header]='headerText[0]'> 

          <ng-template #content> 

            <ejs-grid  #grid id="Grid" (rowSelected)='rowSelected($event)' [dataSource]="data" (toolbarClick)='clickHandler($event)' 

  [allowFiltering]="true" [filterSettings]='filterSettings'  

               allowSorting='true' showColumnMenu='true' [allowExcelExport]='true' [allowPdfExport]='true' [editSettings]='editSettings' [toolbar]='toolbar' 

              [allowPaging]="true" [pageSettings]='pageOption'> 

              <e-columns> 

. . . . . .  

            </ejs-grid> 

          </ng-template> 

        </e-tabitem> 

      </e-tabitems> 

    </ejs-tab> 

[app.component.ts] 

import { Component, OnInit, ViewChild  } from '@angular/core'; 

import { orderData } from './data'; 

import { AggregateService, GridComponent, DialogEditEventArgs,ToolbarService, ExcelExportService, PdfExportService, 

      } from '@syncfusion/ej2-angular-grids'; 

import { EditSettingsModel, ToolbarItems, SaveEventArgs } from '@syncfusion/ej2-angular-grids'; 

. . . . . . 

export class AppComponent { 

. . . . .  

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

    public grid: GridComponent; 

. . . . 

     

    public ngOnInit(): void { 

       this.filterSettings = { type: 'Menu' }; 

        this.data = orderData; 

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }; 

         this.toolbar = ['ExcelExport', 'PdfExport', 'CsvExport']; 

    } 

    rowSelected (args: any) : void { 

      console.log(this.grid.getSelectedRecords()); 

    } 

     clickHandler(args: any): void { 

        switch (args.item.text) { 

            case 'PDF Export': 

                this.grid.pdfExport(); 

                break; 

            case 'Excel Export': 

                this.grid.excelExport(); 

                break; 

            case 'CSV Export': 

                this.grid.csvExport(); 

                break; 

        } 

    } 

} 

Sample link :  https://stackblitz.com/edit/angular-4yq4q1-r6kzxy?file=app.component.ts 

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

Regards, 

Thiyagu S.