Excel Export breaks string filter when using Menu, but works with Checkbox/Excel filtering

[Jerod Burnett]

Menu Filter crashes after Excel Export

If I use the Menu filter, then perform an Excel Export, and afterwards open the filter on the “Avail FY” column, I get:
ERROR TypeError: Cannot read properties of undefined (reading '0')

On subsequent clicks I then get:
ERROR TypeError: Cannot read properties of undefined (reading 'isDestroyed')

The example below is a minimal Angular + EJ2 Grid repro. It uses a simple in-component data array and multiple columns, with global filterSettings = { type: 'Menu' } and a toolbar with ExcelExport. The issue occurs specifically when opening the filter on the “Avail FY” column after performing an Excel export.

Component (TypeScript)

Angular standalone component using EJ2 Grid. Data is a simple array, “Avail FY” is always a string.

// app.component.ts (standalone)

import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import {
  GridModule,
  GridComponent,
  ColumnChooserService,
  FilterService,
  ToolbarService,
  ExcelExportService,
  SortService,
  ExcelExportProperties
} from '@syncfusion/ej2-angular-grids';

@Component({
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  imports: [CommonModule, GridModule],
  providers: [ColumnChooserService, FilterService, ToolbarService, ExcelExportService, SortService]
})
export class AppComponent {
  @ViewChild('grid', { static: true }) grid?: GridComponent;

  // Minimal data that reproduces the issue: plain strings, including an empty string
  public data = [
    { id: 1, name: 'A', availFy: '2025',  status: 'Open'   },
    { id: 2, name: 'B', availFy: '2025*', status: 'Closed' },
    { id: 3, name: 'C', availFy: '',      status: 'Open'   }
  ];

  public filterSettings = { type: 'Menu' };
  public toolbar: string[] = ['ExcelExport'];

  toolbarClick(args: any): void {
    if (args?.item?.id?.toLowerCase().includes('excelexport') && this.grid) {
      const props: ExcelExportProperties = { fileName: 'repro.xlsx' };
      this.grid.excelExport(props);
    }
  }
}
    

Template (HTML)

Multiple columns shown; the problem occurs specifically on the “Avail FY” column after export.

<!-- app.component.html -->

<ejs-grid
  #grid
  [dataSource]="data"
  [allowFiltering]="true"
  [filterSettings]="filterSettings"
  [toolbar]="toolbar"
  [allowExcelExport]="true"
  height="300"
  (toolbarClick)="toolbarClick($event)">

  <e-columns>
    <e-column field="id" headerText="ID" type="number" width="80"></e-column>
    <e-column field="name" headerText="Name" type="string" width="120"></e-column>

    <!-- Problem column: works initially; post-export Menu filter open triggers error -->
    <e-column field="availFy" headerText="Avail FY" type="string" width="120"></e-column>

    <e-column field="status" headerText="Status" type="string" width="120"></e-column>
  </e-columns>
</ejs-grid>

Steps to Reproduce

1. Load the page.
2. Click the toolbar “ExcelExport”.
3. Open the filter menu for the “Avail FY” column.
4. Observe the error in the console:
   • TypeError: Cannot read properties of undefined (reading '0') at FlMenuOptrUI.dropSelectedVal
   • Subsequent clicks may show TypeError: reading 'isDestroyed'

Question

Is this a known lifecycle/state issue with the Menu filter’s operator dropdown after Excel export? Is there a fix/patch, or a recommended workaround (other than switching this column to CheckBox/Excel filter?)

[Santhosh Iruthayaraj]

Hi Jerod Burnett,

Greetings from Syncfusion Support.

We have created a sample using the code you provided. During our testing, we observed that after exporting to Excel, the Filter menu opened as expected. Please refer to the attached video demonstration and sample link below for your reference:

Sample: https://stackblitz.com/edit/angular-grid-u7mdtf-jlvxjcxw

Regarding the script error you mentioned, “Cannot read properties of undefined (reading '0')”, this error typically occurs when the Grid is unable to determine the column type. By default, the Grid automatically detects the column type based on the first record in the dataSource. If the first record contains blank or null values for any column, the Grid cannot identify the column type. Since filtering behavior depends on the column type, this can lead to issues. Therefore, it is important to explicitly define the column type for such columns. Please refer to the documentation below for more details:

Column Types: Column Types in Angular Grid component | Syncfusion

However, in your provided code sample, we noticed that the first record in your dataSource contains valid data for all columns, and you have explicitly defined the column types. As a result, no errors occurred with the filters. We recommend ensuring that each column has a defined column type in your implementation. If you continue to experience issues, please share a sample that reproduces the problem so that we can investigate further and provide an appropriate solution.

Regards,

Santhosh I

Attachment: filterdemo_36ee692.zip