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. Image for the cookie policy date

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


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?

    <div class="flex-column">
      <ejs-grid #grid1 id="grid1" height="110px"

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'];

    "@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",

5 Replies

MS Madhu Sudhanan P Syncfusion Team March 21, 2019 06:59 AM UTC

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.  

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. 

Madhu Sudhanan P 

LA Laurens Albers March 21, 2019 12:45 PM UTC

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


TS Thavasianand Sankaranarayanan Syncfusion Team March 26, 2019 04:19 PM UTC

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. 
Thavasianand S. 

LA Laurens Albers March 27, 2019 08:16 AM UTC


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


Laurens Albers

MS Madhu Sudhanan P Syncfusion Team March 27, 2019 09:07 AM UTC

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

Live Chat Icon For mobile
Up arrow icon