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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

143435 Mar 20,2019 09:16 AM UTC Mar 27,2019 09:07 AM UTC Angular - EJ 2 5
loading
Tags: Grid
Laurens Albers
Asked On March 20, 2019 09:16 AM UTC

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 [Syncfusion]
Replied On 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. 

Regards, 
Madhu Sudhanan P 


Laurens Albers
Replied On 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


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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 
  
  
 
Regards, 
Thavasianand S. 


Laurens Albers
Replied On March 27, 2019 08:16 AM UTC

Hi,

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

greetings,

Laurens Albers

Madhu Sudhanan P [Syncfusion]
Replied On 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. 
  
Regards, 
Madhu 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon