Contextmenu error -> TypeError getComputedStyle in Grid: ejs-grid, Ang7+, TypeS3+,

[Laurens Albers]

Hi

I have a component with 4 grids, i want to implement a contextmenu in each of them.

But when i want to set a contextmenu for any(doesnt matter which of the 4) grid. The following error appears upon initialization of the component:

ERROR TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

    at getScrollableParent (popup.js:667)

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

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

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

    at ContextMenu.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/context-menu.js.ContextMenu.render (context-menu.js:96)

    at Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (observer.js:89)

    at GridComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.notify (component.js:189)

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

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

    at component-base.js:100

Any idea what is causing this or referring to?

.HTML

    <div class="flex-column">

      <ejs-grid #grid1 id="grid1" height="110px"

                [columns]='columns1'

                [dataSource]='dataSource1'

                rowHeight='20'

                droppable

                [allowSelection]='true'

                (onDrop)="onGridDrop1($event)"

                (dblclick)="onRowsClick($event)"

                [editSettings]='editSettings'

                [contextMenuItems]="contextMenuItems"

                [dragOverClass]="'drag-target-border-green'"

                [dragHintClass]="'drag-hint'">

      </ejs-grid>

    </div>

.TS

import { GridComponent, SelectionService, EditSettingsModel, ContextMenuItem, ContextMenuService } from "@syncfusion/ej2-angular-grids";

  providers: [ContextMenuService, SelectionService]

  dataSource1: any[] = [];

  columns1: object[] = [{ field: 'name', headerText: 'Rows', textAlign: 'Left', width: 40, isPrimaryKey: true }];

  editSettings: EditSettingsModel = { allowDeleting: true };

  contextMenuItems: ContextMenuItem[] = ['Delete'];

.PACKAGE.JSON

    "@syncfusion/ej2-angular-base": "~16.4.47",

    "@syncfusion/ej2-angular-buttons": "~16.4.47",

    "@syncfusion/ej2-angular-calendars": "~16.4.47",

    "@syncfusion/ej2-angular-diagrams": "~16.4.47",

    "@syncfusion/ej2-angular-dropdowns": "~16.4.47",

    "@syncfusion/ej2-angular-grids": "~16.4.47",

    "@syncfusion/ej2-angular-inputs": "~16.4.47",

    "@syncfusion/ej2-angular-lists": "~16.4.47",

    "@syncfusion/ej2-angular-maps": "^16.4.55",

    "@syncfusion/ej2-angular-navigations": "~16.4.47",

    "@syncfusion/ej2-angular-popups": "~16.4.47",

    "@syncfusion/ej2-angular-richtexteditor": "~16.4.47",

    "@syncfusion/ej2-angular-schedule": "~16.4.47",

    "@syncfusion/ej2-angular-splitbuttons": "~16.4.47",

    "@syncfusion/ej2-data": "~16.4.47",

    "@syncfusion/ej2-maps": "^16.4.55",

[Madhu Sudhanan P]

Hi Laurens, 

Thanks for contacting Syncfusion support. 

The reported issue was not reproduced with the code example we have tried and for your reference we have created the below sample.  

Sample: https://stackblitz.com/edit/angular-oqrwmk-agd8z2?file=default.html 

To troubleshoot this issue please remove (onDrop, dblclick, droppable, dragOverClass, dragHintClass) this properties from Grid and ensure wheather this issue will be reproduced or not. If yes, then please share the following details for further assistance, 

1)      Share onDrop and dblClick events code. 

2)      If possible try to reproduce the reported issue in the above attached sample and send back to us. This will help us to provide the solution to you as early as possible. 

Regards, 

Madhu Sudhanan P 

[Laurens Albers]

1)      Share onDrop and dblClick events code. 

Doesnt matter you can delete it, error still occurs

2)      If possible try to reproduce the reported issue in the above attached sample and send back to us. This will help us to provide the solution to you as early as possible.

     stackblitz url below shows that tab2 of a mat-tab-group containing grids doesnt work anymore when another tab uses contextmenu

https://stackblitz.com/edit/angular-oqrwmk-kcqn7x?file=default2.component.ts

[Thavasianand Sankaranarayanan]

Hi Laurens, 

 

We have checked your reported issue and the cause of this issue is due to target is not rendered in DOM. So we suggest you to use lazy loading concept in angular. Please find the help doc link and modified sample in the below link. 

  

Sample Link: https://stackblitz.com/edit/angular-oqrwmk-mhymuq?file=group.html  

  

Help Doc Link: https://material.angular.io/components/tabs/overview#tabs-and-navigation  

 

Regards, 

Thavasianand S. 

[Laurens Albers]

Hi,

Wauw, thank you! ill implement this in my code, this should work.

greetings,

Laurens Albers

[Madhu Sudhanan P]

Hi Laurens, 

  

Thanks for the update. Please try the solution and let us know if any assistance required. 

  

Regards, 

Madhu