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

Element undefined when key pressed in cell with dropdownedit


I've configured a TreeGrid cell with dropdownedit as per your documentation:

public organizationElementTypeObj: DropDownList;
public organizationHtmlElement: HTMLElement;
public organizationElementTypeParams: IEditCell;

ngOnInit(): void {
this.organizationElementTypeParams = {
    this.organizationHtmlElement = document.createElement('input');
    return this.organizationHtmlElement;
    return this.organizationElementTypeObj.text;
  write:(args: { rowData: any; column })=> {
    this.organizationElementTypeObj = new DropDownList({
      placeholder: 'please select',
      dataSource: this.organizationElementTypes,
      fields: { text: 'code', value: 'code' },
      value: args.rowData.type.code,
      allowFiltering: true,
      itemTemplate: '<div><div><b>${code}</b></div><div style="padding-left: 12px; text-indent: 0px;font-size: small; opacity: 0.8;white-space:normal;word-wrap: break-word;">${title}</div></div>',
      filtering: (args: FilteringEventArgs) => {
        if (this.organizationElementTypesSubscription) {
        this.organizationElementTypesSubscription = this.organizationElementTypesObservable.subscribe((data: any) => {
          this.organizationElementTypes = data;

This works well. But, while editing the grid row, when I use the TAB key to navigate to the cell and click DOWN KEY to select item from the dropdownlist, the following error occurs:

ERROR TypeError: Cannot read properties of undefined (reading 'classList')
    at addClass (ej2-base.es5.js:4713:26)
    at TreeGrid.treeGridkeyActionHandler (ej2-treegrid.es5.js:3542:37)
    at KeyboardEvents._this.keyPressHandler (ej2-base.es5.js:8577:35)
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26278:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
    at ZoneTask.invokeTask [as invoke] (zone.js:487:34)
    at invokeTask (zone.js:1661:18)
    at globalCallback (zone.js:1692:29)

Looking at the addClass method, ele is undefined in the following code:

else {
    if (!ele.classList.contains(className)) {

The treegrid declaration is:

        <e-column field='id' [isPrimaryKey]="true" [visible]="false" headerText="{{ 'common.id' | translate }}" width='100' textAlign="Left" [validationRules]='requiredNumberRule'></e-column>
        <e-column field='code' headerText="{{ 'common.code' | translate }}" width='100' textAlign="Left" [validationRules]='requiredRule'></e-column>
        <e-column field='type.code' headerText="{{ 'organizationElementType.type' | translate }}" editType= 'dropdownedit' [edit]='organizationElementTypeParams' [validationRules]="requiredRule" width='300'></e-column>
        <e-column field='title' headerText="{{ 'common.title' | translate }}" textAlign="Left" [validationRules]='requiredRule'></e-column>

Is this a bug?

Or am I missing something?

4 Replies

MP Manivannan Padmanaban Syncfusion Team April 7, 2023 02:42 PM UTC

Hi Dimitris,

Greetings from Syncfusion Forums.

Currently we are validating your query and will update you the response on or before April 11, 2023.

Until then, we appreciate your patience.


Manivannan Padmanaban

PS Pon Selva Jeganathan Syncfusion Team April 11, 2023 12:54 PM UTC

Hi Dimitris,

Thanks for your patience.

We are able to replicate the issue(Script error thrown when moving Dropdown Option with key input (Arrow Keys) in Edit Template) at our end. On further validation, we have considered the reported issue (“Script error thrown when moving Dropdown Option with key input (Arrow Keys) in Edit Template”) as a bug.  Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and will include the fix in our upcoming patch release which is expected to be rolled out on April 26,2023. Until then we appreciate your patience.

Feedback link: https://www.syncfusion.com/feedback/42810/script-error-thrown-when-moving-dropdown-option-with-key-input-arrow-keys-in-edit

Note: To view the above feedback, kindly login into your account. 

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization


Pon selva

PS Pon Selva Jeganathan Syncfusion Team April 27, 2023 04:28 AM UTC


The weekly patch release scheduled for today, April 26, 2023, has been called off due to the expected rollout of the 2023 Volume 1 SP release. We will include the fix in first weekly patch release after the volume 1SP release. We will inform you once the fix has been published. We appreciate your patience until then.

PS Pon Selva Jeganathan Syncfusion Team May 10, 2023 01:44 PM UTC


We are Glad to announce that fix for the issue Script error thrown when moving Dropdown Option with key input (Arrow Keys) in Edit Templatehas been rolled out in our Patch release (21.2.4).  So please upgrade to our latest version of Syncfusion package to resolve the reported issue.  

Release Notes: https://ej2.syncfusion.com/documentation/release-notes/21.2.4/?type=all#tree-grid

Feedback link: https://www.syncfusion.com/feedback/42810/script-error-thrown-when-moving-dropdown-option-with-key-input-arrow-keys-in-edit

Live Chat Icon For mobile
Up arrow icon