Can't use contextMenuItems when I have 2 grids in tab control

[kaushal]

hi,

I'm using tab controls and both tabs have ejs grid each. it doesn't show context menu for grid available in second tab.

<mat-tab label="Batch">

<ejs-grid #grid style="height: 100%;"

[dataSource]='data'

[allowPaging]='true'

[allowSorting]='true'

[allowFiltering]='true'

[pageSettings]="pageSettings"

showColumnChooser='true'

[toolbar]='toolbar'

[gridLines]="Both"

[allowExcelExport]='true'

[allowPdfExport]='true'

[allowResizing]= 'true'

[contextMenuItems]="contextMenuItems"

>

<e-columns>

<e-column field='BatchId' headerText='Batch Id' textAlign='Center' width=70 isPrimaryKey='true'>e-column>

<e-column field='BatchName' headerText='Batch Name' textAlign='Center' width=120 isPrimaryKey='true'>e-column>

<e-column field='Status' headerText='Status' textAlign='Center' width=90 isPrimaryKey='true'>e-column>

e-columns>

ejs-grid>

mat-tab>

<mat-tab label="Trades">

<ejs-grid style="height: 100%;"

[dataSource]='tradeData'

[allowPaging]='true'

[allowSorting]='true'

[allowFiltering]='true'

[filterSettings]='filterSettings'

[pageSettings]="tradePageSettings"

showColumnChooser='true'

[toolbar]='tradeToolBar'

[gridLines]="Both"

[allowExcelExport]='true'

[allowPdfExport]='true'

[allowResizing]= 'true'

[contextMenuItems]="tradeContextMenuItems"

>

<e-columns>

<e-column field='BatchName' headerText='Batch' width='100'>e-column>

<e-column field='CptyName' headerText='Counterparty' width='100'>e-column>

<e-column field='ProductIdx' headerText='ProductIdX' width='100'>e-column>

e-columns>

ejs-grid>

mat-tab>

mat-tab-group>

.ts code

import { Component, OnInit, OnChanges, Input, SimpleChanges, SimpleChange, Inject, ViewChild,ViewEncapsulation } from '@angular/core';

import { FormGroup, Validators, FormControl } from '@angular/forms';

import { SelectionService, RowSelectEventArgs } from '@syncfusion/ej2-angular-grids';

import { CommandModel,GridLine, GridComponent, ToolbarItems, PageSettingsModel, IEditCell, FilterSettingsModel, CommandClickEventArgs } from '@syncfusion/ej2-angular-grids';

import { SortService, ResizeService, PageService, EditService, ExcelExportService, PdfExportService, ContextMenuService } from '@syncfusion/ej2-angular-grids';

import { ContextMenuItem, GroupSettingsModel, EditSettingsModel } from '@syncfusion/ej2-angular-grids';

import { Query, DataManager } from '@syncfusion/ej2-data';

import { TabComponent } from '@syncfusion/ej2-angular-navigations';

import { BatchResponse, BatchData } from '../models/batch-response';

import { DataService } from '../services/data-service';

type batchType = { BatchId: string, BatchName: string };

@Component({

selector: 'app-batch-summary',

templateUrl: './batch-summary.component.html',

styleUrls: ['./batch-summary.component.css'],

providers: [SelectionService,SortService, ResizeService, PageService, EditService, ExcelExportService, PdfExportService, ContextMenuService]

})

export class BatchSummaryComponent implements OnInit {

public pageSettings: PageSettingsModel;

public filterSettings: FilterSettingsModel;

public contextMenuItems: ContextMenuItem[];

public tradePageSettings: PageSettingsModel;

public tradeFilterSettings: FilterSettingsModel;

public tradeContextMenuItems: ContextMenuItem[];

public data: BatchData[];

public tradeData: Object[];

public toolbar: string[];

public tradeToolBar : string[];

public key: any;

constructor(private dataService: DataService) {}

ngOnInit(): void {

this.dataService.getAllBatchData().subscribe(x => this.data = x);

this.dataService.getBatchData("-1").subscribe(x => this.tradeData = x);

this.pageSettings = { pageSize: 5, pageCount: 4 };

this.toolbar = ['ColumnChooser'];

this.contextMenuItems = ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending',

'Copy',

'PdfExport', 'ExcelExport', 'CsvExport', 'FirstPage', 'PrevPage',

'LastPage', 'NextPage'];

this.tradePageSettings = { pageSize: 50, pageCount: 4 };

this.tradeToolBar = ['ColumnChooser'];

this.tradeContextMenuItems = ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending',

'Copy',

'PdfExport', 'ExcelExport', 'CsvExport', 'FirstPage', 'PrevPage',

'LastPage', 'NextPage'];

}

Error 

ERROR TypeError: Cannot use 'in' operator to search for '__eventList' in undefined

    at Function.push../node_modules/@syncfusion/ej2-base/src/event-handler.js.EventHandler.addOrGetEventData (event-handler.js:27)

    at Function.push../node_modules/@syncfusion/ej2-base/src/event-handler.js.EventHandler.add (event-handler.js:45)

    at ContextMenu.push../node_modules/@syncfusion/ej2-navigations/src/common/menu-base.js.MenuBase.wireEvents (menu-base.js:280)

    at ContextMenu.push../node_modules/@syncfusion/ej2-navigations/src/common/menu-base.js.MenuBase.render (menu-base.js:211)

    at ContextMenu.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.appendTo (component.js:134)

core.js:15724 ERROR TypeError: Cannot read property 'getPanel' of undefined

    at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.getContent (grid.js:1429)

    at Render.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/render.js.Render.refreshDataManager (render.js:221)

    at GridComponent. (render.js:147)

    at GridComponent.push../node_modules/@syncfusion/ej2-angular-base/src/component-base.js.ComponentBase.trigger (component-base.js:251)

    at Render.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/render.js.Render.refresh (render.js:103)

    at GridComponent.push../node_modules/@syncfusion/ej2-

ERROR TypeError: Cannot read property 'querySelectorAll' of undefined

    at ColumnChooser.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/column-chooser.js.ColumnChooser.rtlUpdate (column-chooser.js:60)

    at ColumnChooser.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/column-

[Ajith Govarthan]

Hi Kaushal, 

Thanks for contacting Syncfusion support. 

We have checked your requirement and able to reproduce the issue at our end. In the angular tab component when you move to second tab the Grid component will not complete its rendering elements and which will be unavailable so which is the root cause of the issue. 

To overcome this issue you can use lazy loading feature of the angular material tab component. Tab contents can be lazy loaded by declaring the body in a ng-template with the matTabContent attribute. 

Which will makes to wait for the child components to load properly. For your convenience we have attached the sample so please refer them for your reference. 

Code example: 

app.component.html 

 

<mat-tab-group > 

  <mat-tab label="First"> 

    Grid1 

    <ejs-grid [dataSource]='data' id="gridcomp" allowPaging='true' allowExcelExport='true' allowPdfExport='true' allowSorting='true' 

        [contextMenuItems]="contextMenuItems" [editSettings]='editing'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true'></e-column> 

            <e-column field='CustomerName' headerText='Customer Name'></e-column> 

            <e-column field='Freight' headerText='Freight' format='C2' textAlign='Right' editType='numericedit'></e-column> 

            <e-column field='ShipName' headerText='Ship Name' width='200'></e-column> 

            <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></e-column> 

            <e-column field='ShipCity' headerText='Ship City' width='150'></e-column> 

        </e-columns> 

    </ejs-grid> 

  </mat-tab> 

  <mat-tab label="Second"> 

     <ng-template matTabContent>                                 // use this tag to lazy load the content 

           Grid2 

        <ejs-grid [dataSource]='data' id="grid" allowPaging='true' allowExcelExport='true' allowPdfExport='true' allowSorting='true' 

        [contextMenuItems]="contextMenuItems" [editSettings]='editing'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true'></e-column> 

            <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></e-column> 

            <e-column field='ShipCity' headerText='Ship City' width='150'></e-column> 

        </e-columns> 

    </ejs-grid> 

     </ng-template> 

  </mat-tab> 

</mat-tab-group> 

Sample Link: https://stackblitz.com/edit/angular-fxbzp7-y9cvsb?file=app.component.html 

Angular- tab material link: https://material.angular.io/components/tabs/overview 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[kaushal]

Thanks Ajith for your Help. 

Seems like issue has been resolved when we doing Lazy Binding. However 'Export' functionality with Excel is not working with Grid Control in second tab.

It's working perfectly fine for grid in first tab control.

Please refer attached screenshot for your perusal.

Attachment: GridExport_acadaa80.zip

[Ajith Govarthan]

Hi Kaushal, 

Thanks for the update. 

Based on your query you have mentioned that Exporting with excel is not working fine with Grid control in second tab. So, we have a prepared an sample and excel exporting is working fine with Grid control in second tab. 

For your convenience we have attached the sample and please download the sample from the following link 

Sample Link: https://stackblitz.com/edit/angular-fxbzp7-c6bluv?file=app.component.html 

Documentation link: https://ej2.syncfusion.com/angular/documentation/grid/excel-exporting/#excel-export 

If you still face the issue please share the below details to find the root cause of the issue. 

1. If possible please try to reproduce the issue in the attached sample. 

2. Share the Syncfusion package version. 

Regards, 

Ajith G.