Error in EJS Grid (Angular)

[Shiron]

Hi Team,

We are getting the below error after upgrading the syncfusion angular package to the latest. We have done column templating and also added the tooltip for the templated columns. Sometimes the templated columns are not rendering correctly. We have done some customization in the grid toolbar and added a search input box and also added a few buttons to do other required actions. The below error triggers whenever we click on the button inside the grid toolbar. All the functionalities were working fine before the upgrade to the latest version. Could you please check and help us to resolve the issue

[Vinitha Balasubramanian]

Hi Shiron,

Greetings from Syncfusion support.

Query : Error in EJS Grid (Angular)

We have prepared a sample to replicate your reported problem at our end. But it is working fine, kindly refer the below sample for reference.

Sample link : https://stackblitz.com/edit/angular-7jkzwj-wnqbw4?file=app.component.html,package.json

Kindly share the below details with us to validate your query further at our end.

• Share the complete Grid code files and package.json file
• What are the actions you have performed inside the toolbarClick
• Are facing this issue with all the toolbar buttons or any particular button?
• Share the video demo of the reported problem.
• If possible share the issue reproducible sample or try to make the issue in given sample.

Regards,

Vinitha Balasubramanian

[Shiron]

Hi Vinitha,

Thanks for the reply. Please see the package.json file and the grid template code

We are facing an issue with all the toolbar buttons. Please note that we are fetching the data from the back-end API using the async operator and also have customized the toolbar for the global search feature. When we try to do the global search getting the below error:

core.mjs:6347 ERROR TypeError: Cannot read properties of undefined (reading 'querySelectorAll')

    at FocusStrategy.skipOn (ej2-grids.es2015.js:7871:18)

    at FocusStrategy.onKeyPress (ej2-grids.es2015.js:7573:18)

    at Observer.notify (ej2-base.es2015.js:2329:29)

    at GridComponent.notify (ej2-base.es2015.js:7030:32)

    at GridComponent.keyActionHandler (ej2-grids.es2015.js:18071:18)

    at KeyboardEvents.keyPressHandler (ej2-base.es2015.js:8286:34)

    at _ZoneDelegate.invokeTask (zone.js:406:31)

    at Object.onInvokeTask (core.mjs:26275:33)

    at _ZoneDelegate.invokeTask (zone.js:405:60)

    at Zone.runTask (zone.js:178:47)

We have templated the column with buttons to view, edit and delete the selected record. Sometimes, all these buttons are not rendering properly

package.json

{

  "name": "zertify-app",

  "version": "1.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build": "ng build",

    "build:dev": "ng build --watch",

    "build:stats": "ng build --stats-json",

    "analyze": "webpack-bundle-analyzer dist/zertify-app/stats.json",

    "watch": "ng build --watch --configuration development",

    "test": "ng test",

    "lint": "ng lint",

    "lint:fix": "ng lint --fix"

  },

  "private": true,

  "dependencies": {

    "@angular/animations": "~14.0.4",

    "@angular/cdk": "^14.0.4",

    "@angular/common": "~14.0.4",

    "@angular/compiler": "~14.0.4",

    "@angular/core": "~14.0.4",

    "@angular/forms": "~14.0.4",

    "@angular/localize": "~14.0.4",

    "@angular/material": "^14.0.4",

    "@angular/platform-browser": "~14.0.4",

    "@angular/platform-browser-dynamic": "~14.0.4",

    "@angular/router": "~14.0.4",

    "@asymmetrik/ngx-leaflet": "^14.0.0",

    "@ng-bootstrap/ng-bootstrap": "^13.0.0-beta.1",

    "@ng-select/ng-select": "^9.0.1",

    "@ngneat/hot-toast": "^4.1.0",

    "@ngneat/overview": "^3.0.0",

    "@popperjs/core": "^2.11.5",

    "@rxweb/reactive-form-validators": "^2.1.7",

    "@syncfusion/ej2-angular-buttons": "^20.2.38",

    "@syncfusion/ej2-angular-calendars": "^20.2.38",

    "@syncfusion/ej2-angular-dropdowns": "^20.2.39",

    "@syncfusion/ej2-angular-grids": "^20.2.39",

    "@syncfusion/ej2-angular-inputs": "^20.2.38",

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

    "@syncfusion/ej2-angular-navigations": "^20.2.39",

    "@syncfusion/ej2-angular-popups": "^20.2.39",

    "@syncfusion/ej2-angular-richtexteditor": "^20.2.39",

    "@syncfusion/ej2-angular-schedule": "^20.2.38",

    "@syncfusion/ej2-base": "^20.2.39",

    "@syncfusion/ej2-layouts": "^20.2.39",

    "@typescript-eslint/eslint-plugin": "^5.14.0",

    "@typescript-eslint/parser": "^5.14.0",

    "angular2-hotkeys": "^13.1.0",

    "bootstrap": "^5.1.3",

    "bootstrap-icons": "^1.8.1",

    "jquery": "^3.6.0",

    "leaflet": "^1.8.0",

    "popper.js": "^1.16.1",

    "primeicons": "^5.0.0",

    "primeng": "^14.0.0-rc.1",

    "rxjs": "~7.4.0",

    "tslib": "^2.3.0",

    "zone.js": "~0.11.4"

  },

  "devDependencies": {

    "@angular-devkit/build-angular": "~14.0.4",

    "@angular-eslint/builder": "14.0.0",

    "@angular-eslint/eslint-plugin": "14.0.0",

    "@angular-eslint/eslint-plugin-template": "14.0.0",

    "@angular-eslint/schematics": "14.0.0",

    "@angular-eslint/template-parser": "14.0.0",

    "@angular/cli": "^14.0.4",

    "@angular/compiler-cli": "~14.0.4",

    "@angular/localize": "^14.0.4",

    "@types/jasmine": "^3.10.3",

    "@types/jquery": "^3.5.14",

    "@types/leaflet": "^1.7.11",

    "@types/node": "^16.11.12",

    "eslint": "^8.4.1",

    "eslint-config-prettier": "^8.3.0",

    "eslint-plugin-html": "^6.2.0",

    "eslint-plugin-import": "^2.25.3",

    "eslint-plugin-prettier": "^4.0.0",

    "jasmine-core": "~3.10.0",

    "karma": "^6.3.16",

    "karma-chrome-launcher": "~3.1.0",

    "karma-coverage": "~2.0.3",

    "karma-jasmine": "~4.0.0",

    "karma-jasmine-html-reporter": "~1.7.0",

    "prettier": "^2.5.1",

    "source-map-explorer": "^2.5.2",

    "typescript": "^4.7.3",

    "webpack-bundle-analyzer": "^4.5.0"

  }

}

Grid

<div class="card mb-3 module-header">

  <div class="bg-holder d-none d-lg-block bg-card">

  </div>

  <div class="card-body position-relative">

    <div class="row">

      <div class="col-lg-12">

        <div class="row flex-between-end">

          <div class="col-auto align-self-center">

            <h5 class="mb-0" data-anchor="data-anchor">

              <i class="bi bi-card-list"></i> {{pageTitle}}

            </h5>

          </div>

          <div class="col-auto ms-auto">

            <div class="nav nav-pills nav-pills-falcon flex-grow-1" role="tablist">

              <ejs-tooltip id='tooltipAdd' position="BottomCenter" content='Add a new record'>

                <button id="addButton" ejs-button cssClass="e-round e-primary" iconCss="e-icons e-plus-icon" [routerLink]="['/majorcategory', '0', 'edit']"></button>

              </ejs-tooltip>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

<mat-divider></mat-divider>

<div class="card mb-3">

  <div class="card-body bg-light">

    <div class="tab-content">

      <div class="tab-pane preview-tab-pane active" role="tabpanel">

        <div class="col-12">

          <ejs-grid #gridComponent

            height='300'

            width="100%"

            gridLines='Both'

            [rowHeight]='30'

            [dataSource]='gridBoundedData | async'

            enableStickyHeader=true

            [showColumnChooser]= 'true'

            showColumnMenu='true'

            allowPaging= 'true'

            [allowFiltering]='true'

            allowSorting= 'true'

            allowGrouping= 'true'

            allowResizing = 'true'

            allowReordering='true'

            [allowExcelExport]='true'

            [allowPdfExport]='true'

            [pageSettings]='pageSettings'

            [filterSettings]='filterSettings'

            [selectionSettings]='selectionSettings'

            [toolbar]='toolbarOptions'

            (keyPressed)="keyHandler($event)"

            (dataStateChange)= 'dataStateChange($event)'

            [columnMenuItems]='columnMenuItems'

            (columnMenuClick)="onColumnMenuClick($event)"

            (rowSelected)='rowSelected($event)'

            (dataBound)='dataBound($event)'>

            <ng-template #toolbarTemplate let-data>

              <div class="row">

                <div class="col-md-8"></div>

                <div class="col-md-4 offset-md-8">

                  <div class="input-group m-1">

                      <input type="search" class="form-control form-control-sm m-1" placeholder="Search" aria-label="Search">

                      <ejs-tooltip id='tooltipAdd' position="BottomCenter" content='Search record'>

                        <button class="btn btn-secondary m-1 btn-sm" (click)="onSearchButtonClick()">

                          <i class="bi bi-search"></i>

                        </button>

                      </ejs-tooltip>

                      <ejs-tooltip id='tooltipAdd' position="BottomCenter" content='Clear search'>

                        <button class="btn btn-danger m-1 btn-sm" (click)="onCancelSearchButtonClick()">

                          <i class="bi bi-x-circle"></i>

                        </button>

                      </ejs-tooltip>

                      <ejs-tooltip id='tooltipAdd' position="BottomCenter" content='Export data'>

                        <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Export">

                          <mat-icon>more_vert</mat-icon>

                        </button>

                      </ejs-tooltip>

                      <mat-menu #menu="matMenu">

                        <button mat-menu-item (click) = "expoertMenuClick('PDF Export')">

                          <mat-icon>cloud_upload</mat-icon>

                          <span>PDF Export</span>

                        </button>

                        <button mat-menu-item (click) = "expoertMenuClick('Excel Export')">

                          <mat-icon>cloud_upload</mat-icon>

                          <span>Excel Export</span>

                        </button>

                        <button mat-menu-item (click) = "expoertMenuClick('CSV Export')">

                          <mat-icon>cloud_upload</mat-icon>

                          <span>CSV Export</span>

                        </button>

                      </mat-menu>

                  </div>

                </div>

              </div>

            </ng-template>

            <e-columns>

              <e-column field='category' headerText='Major Category'></e-column>

              <e-column field='equipmentType' headerText='Equipment Type' clipMode='EllipsisWithTooltip'></e-column>

              <e-column field='remarks' headerText='Remarks' clipMode='EllipsisWithTooltip' type="string"></e-column>

              <e-column field='status' headerText='Status'></e-column>

              <e-column textAlign="right" autoFit="true" [allowResizing]='false' [showInColumnChooser]='false' width="90" minWidth="90" maxWidth="90">

                <ng-template #template let-data>

                      <ejs-tooltip id='tooltipEdit' content='Edit this record'>

                        <button ejs-button cssClass="e-small e-primary" iconCss="e-icons e-edit" (click)='onEditClick($event)'></button>

                      </ejs-tooltip>

                      <ejs-tooltip id='tooltipDelete' content='Delete this record'>

                        <button ejs-button cssClass="e-small e-danger" iconCss="e-icons e-trash" (click)="onDeleteClick($event)"></button>

                      </ejs-tooltip>

                </ng-template>

              </e-column>

            </e-columns>

          </ejs-grid>

          <div *ngIf="visible">

            <ejs-dialog #confirmDialog

              [buttons]='confirmDlgButtons'

              [header]='confirmHeader'

              [animationSettings]='animationSettings'

              [showCloseIcon]='confirmCloseIcon'

              [target]='target'

              [width]='confirmWidth'>

              <ng-template #content>

                  <span>Are you sure you want to delete this item ?</span>

              </ng-template>

            </ejs-dialog>

          </div>

          <div class="alert alert-danger alert-dismissible fade show" role="alert" *ngIf="errorMessage">

            <strong>{{errorMessage}}</strong>

            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>

          </div>

        </div>

      </div>

    </div>

  </div>

  <div class="card-footer">

    <i class="fas fa-shoe-prints"></i> {{selectedRecordHistory}}

  </div>

</div>

Please let me know if you need any further details from our end

[Pavithra Subramaniyam]

Hi Shiron,

Thanks for sharing the details.

Query#1: also have customized the toolbar for the global search feature. When we try to do the global search getting the below error

We can reproduce the reported error at our end when the EJ2 Angular Grid is defined with the toolbar template.  Currently, we are validating this in our source, and we will update the further details on July 27^th, 2022. Until then we appreciate your patience.

Query#2: We have templated the column with buttons to view, edit and delete the selected record. Sometimes, all these buttons are not rendering properly

We have tried to reproduce the issue with the given code example and mock data, but the Template column buttons are rendered properly. Please refer to the below sample link for more information.

https://stackblitz.com/edit/angular-f8ogbc?file=app.component.html,app%2Fapp.module.ts,app.component.ts

So, we are afraid that the issue occurs only in your application. So please share an issue reproducible sample or host the sample and share the link for further validation.

Regards,

Pavithra S

[Shiron]

Hi Pavithra,

Thanks for the update. Regarding Query#1, happy to know that you will be able to resolve the issue in your next update

Query#2: Please note that this is not happening frequently, rarely does this occur. We can manage it somehow.

Could you please check the below-mentioned error? This happens when we do the paging or click on the templated column

[Pavithra Subramaniyam]

Hi Shiron,

While we are rendering the toolbar template in our EJ2 angular Grid, the toolbar instance is not set properly to the toolbarModule which causes the reported script errors. So, we have confirmed this as an issue at our end and logged the defect report “Script error while keypress in Grid with toolbar template” for the same. Thank you for taking time to report this issue and helping us to improve our product. At Syncfusion, we are committed to fix all validated defects (subject to technological feasibility and Product Development Life Cycle) and this fix will be included in our upcoming release which is expected to be rolled out on or before 10^th August 2022.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.       

https://www.syncfusion.com/feedback/36651/script-error-while-keypress-in-grid-with-toolbar-template

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”

Regards,

Pavithra S

[Shiron]

Hi Pavithra,

Thanks for the update. Eagerly waiting for your next release to resolve the issue.

Could you please check and update the below issue which I reported in the earlier messages. I am posting it again and request you to kindly check and guide me how to resolve the issue

This happens when we do the paging or clicking on the templated columns

[Pavithra Subramaniyam]

Hi Shiron,

The reported script error with the toolbar template occurs while destroying the Grid component which is also due to the toolbar instance issue. This will be also fixed along with the below issue and is expected on August 10^th, 2022.

Please track the below feedback link for more updates on this issue      

https://www.syncfusion.com/feedback/36651/script-error-while-keypress-in-grid-with-toolbar-template

Regards,

Pavithra S

[Pavithra Subramaniyam]

Hi Shiron,

We are sorry for the inconvenience.

Due to some complexities, we could not include the fix for the issue “Script error while keypress in Grid with toolbar template” as we updated. However, we will include the fix in our August 31^st, 2022, patch release. Until then we appreciate your patience.

Regards,

Pavithra S

[Shiron]

Hi Pavithra,

Yes, you are correct. We could not resolve the issue after upgrading to the latest version.

Right now we are facing some other issues also. After the up-gradation, most of the syncfusions controls like DatePicker, TimePicker are not binding properly in angular reactive form. We are using Angular 14.1.2 and the Syncfusion Angular UI Components Version v20.2.44. The enable(), disable() and setValue() etc are not working. These were working perfectly before upgrading to the latest version. Are there any known issues with Angular 14 and the latest syncfusion control? Most of the Syncfusion Angular components are not working as we expected now. Could you please check and resolve the issue if there are any

With Thanks and Regards

Shiron

[Shiron]

Hi Pavithra,

Could you please check and give an update regarding the issue. Is there any issue with latest Angular 14 with latest Syncfusion changes

With Thanks and Regards

Shiron

[Pavithra Subramaniyam]

Hi Shiron,

The Angular 14 support is given to the EJ2 components from version “20.2.36”. We have checked the Grid Reactive form editing with the “DatePicker” component and it is working fine. Please refer to the below sample for more information.

https://stackblitz.com/edit/angular-6bw8h9?file=package.json,app.component.ts,app.component.html,app%2Fapp.module.ts

So, to validate further please share the below details that will be helpful for us to check the reported scenario and provide a solution as early as possible.

1. Share the Grid code example with the Reactive form template
2. In which event you have enabled, disabled, and set value to the components? Please share the code details.
3. Is there any script error?

Regards,

Pavithra S