Getting error while editing in Dialog mode with 'editSettingsTmeplate'

Question

Getting the following error when I click on the save button of edit Dialog.core.mjs:7643 ERROR TypeError: Cannot read properties of null (reading 'parentElement') at FormValidator.getErrorElement (ej2-inputs.es2015.js:7389:96) at FormValidator.validateRules (ej2-inputs.es2015.js:7257:18) at FormValidator.validate (ej2-inputs.es2015.js:6920:22) at Edit.editFormValidate (ej2-grids.es2015.js:39090:51) at DialogEdit.editFormValidate (ej2-grids.es2015.js:36905:41) at DialogEdit.endEdit (ej2-grids.es2015.js:36914:42) at DialogEdit.endEdit (ej2-grids.es2015.js:38734:15) at Edit.endEditing (ej2-grids.es2015.js:39122:25) at Edit.endEdit (ej2-grids.es2015.js:39035:14) at GridComponent.endEdit (ej2-grids.es2015.js:17139:29)GridCode from where I am getting this error:getErrorElement(name) { this.infoElement = select(this.errorElement + '.' + this.errorClass, this.inputElement.parentElement); if (!this.infoElement) { this.infoElement = select(this.errorElement + '.' + this.errorClass + '[for="' + name + '"]', this.element); } return this.infoElement; }Saving is working fine.$event from beginAction when I click on edit toolbar option: TS code:import {Component, OnInit, ViewChild} from '@angular/core';import {IUser} from "../../models/interface/i-user";import {UserService} from "../../services/user.service";import { DataSourceChangedEventArgs, EditSettingsModel, ExcelExportProperties, FilterSettingsModel, GridComponent, InfiniteScrollSettings, PdfExportProperties, QueryCellInfoEventArgs, RowDataBoundEventArgs, RowSelectEventArgs, RowSelectingEventArgs, ToolbarItems} from "@syncfusion/ej2-angular-grids";import {ClickEventArgs} from "@syncfusion/ej2-angular-navigations";import {ActionBeginEventArgs, ActionCompleteEventArgs, MultiSelectComponent} from "@syncfusion/ej2-angular-dropdowns";import {IOrganization} from "../../models/interface/i-organization";import {OrganizationService} from "../../services/organization.service";import {IRole} from "../../models/interface/i-role";import {RoleService} from "../../services/role.service";import {User} from "../../models/class/user";import {Organization} from "../../models/class/organization";import {LoggerService} from "../../logging/logger.service";import {ServerError} from "../../models/interface/ServerError";import {lastValueFrom} from "rxjs";import { RecordClickEventArgs} from "@syncfusion/ej2-grids/src/grid/base/interface";@Component({ selector : 'app-users', templateUrl: './users.component.html', styleUrls : ['./users.component.scss'] })export class UsersComponent implements OnInit { @ViewChild('grid') public grid!: GridComponent; userForm = new User(); actionInProgress!: string; rolesMap = new Map(); users: IUser[] | undefined; organizations: IOrganization[] | undefined; roleData: IRole[] | undefined; // usersData!: { result: IUser[] | undefined, count: number | undefined }; usersData!: IUser[] | undefined; editSettings!: EditSettingsModel; toolbar!: ToolbarItems[]; filterOption: FilterSettingsModel = { ignoreAccent: true, type : "Excel" } serverError!: string; testServerError = "TestError"; rowOddEvenCounter = 1; public fields: Object = {text: 'name', value: 'id'}; editParams = {params: {popupHeight: '300px', allowFiltering: true}}; selectedOrg!: number; showPassword = false; selectedRoles!: number[]; usernameValidationRules = {required: true, minLength: 3}; selectedRowIndex!: number | undefined; constructor(private _userService: UserService, private _orgService: OrganizationService, private _roleService: RoleService, private _loggingService: LoggerService) { } ngOnInit(): void { this.editSettings = {allowEditing: true, allowAdding: true, allowDeleting:true, mode: "Dialog"}; this.toolbar = ["Add", "Edit", "ColumnChooser", "PdfExport", "ExcelExport", "CsvExport", "Search"]; this._userService.getUsers$.subscribe(response => { if(response.error) { this.errorHandling(response.error); } else { this.users = response.serverData?.dataList; this.usersData = this.users; this._loggingService.debug("Users received from server:" + this.users?.length); } }); this._orgService.getOrgs$.subscribe(response => { if(response.error) { this.errorHandling(response.error); } else { this.organizations = response.serverData?.dataList; this._loggingService.debug("Organisations received from server:" + this.organizations?.length); } }); this._roleService.getRoles$.subscribe(response => { if(response.error) { this.errorHandling(response.error); } else { this.roleData = response.serverData?.dataList; if(this.roleData !== undefined) { this.prepareRoleMap(this.roleData); } this._loggingService.debug("Roles received from server:" + this.roleData?.length); } }); } private prepareRoleMap(roleData: IRole[]) { for (let role of roleData) { this.rolesMap.set(role.id, role); } } toolbarClick($event: ClickEventArgs) { let pdfExportProperties: PdfExportProperties = {fileName: "Users.pdf"} let excelExportProperties: ExcelExportProperties = {fileName: "Users.xlsx"} let csvExportProperties: ExcelExportProperties = {fileName: "Users.csv"} if($event.item.id === 'grid_649044720_0_pdfexport') { // Id can be change in future this.grid.pdfExport(pdfExportProperties).then(r => { this._loggingService.info("PDF Export Done") }); } else if($event.item.id === 'grid_649044720_0_excelexport') { // Id can be change in future this.grid.excelExport(excelExportProperties).then(r => { this._loggingService.info("Excel Export Done") }); } else if($event.item.id === 'grid_649044720_0_csvexport') { // Id can be change in future this.grid.csvExport(csvExportProperties).then(r => { this._loggingService.info("CSV Export Done") }); } } customiseRow(args: RowDataBoundEventArgs) { // Change the bg color of row alternatively if(this.rowOddEvenCounter % 2 == 0) { this.rowOddEvenCounter -= 1; args.row?.classList.add("bg-white"); } else { this.rowOddEvenCounter += 1; args.row?.classList.add("bg-gray-50"); } } customiseCell(args: QueryCellInfoEventArgs) { const user: IUser = args.data; if(args.column?.field == "expired" && user.expired) { args.cell?.classList.add("bg-red-300"); } if(args.column?.field == "locked" && user.locked) { args.cell?.classList.add("bg-purple-300"); } if(args.column?.field == "enabled" && user.enabled) { args.cell?.classList.add("bg-green-300"); } if(args.column?.field == "sysAdminRole" && user.sysAdminRole) { args.cell?.classList.add("bg-blue-300"); } if(args.column?.field == "orgAdminRole" && user.orgAdminRole) { args.cell?.classList.add("bg-green-500"); } if(args.column?.field == "siteAdminRole" && user.siteAdminRole) { args.cell?.classList.add("bg-yellow-300"); } if(args.column?.field == "ownerRole" && user.ownerRole) { args.cell?.classList.add("bg-orange-300"); } if(args.column?.field == "operatorRole" && user.operatorRole) { args.cell?.classList.add("bg-violet-200"); } if(args.column?.field == "workerRole" && user.workerRole) { args.cell?.classList.add("bg-emerald-300"); } } async actionBegin($event: any) { console.log($event); if($event.requestType === "add") { if(this.actionInProgress !== "add") { this.userForm = new User(); this.selectedOrg = -1; this.selectedRoles = []; } this._loggingService.debug("Adding User start") this.actionInProgress = "add"; } if($event.requestType === "beginEdit") { this._loggingService.debug("Editing User start") this.actionInProgress = "beginEdit"; this.userForm = $event.rowData; this.selectedOrg = this.userForm.organization?.id; this.selectedRoles = []; if(this.userForm.roles !== undefined && this.userForm.roles.length > 0) { for (let role of this.userForm.roles) { this.selectedRoles.push(role.id); } } } if($event.requestType === "save") { console.log($event) this.saveUser().then(responseUser =>{})} } private async saveUser(){ this._loggingService.debug("Saving User start") this.prepareUserForSave(); let serverResponse$ = this._userService.addUser$(this.userForm) let serverResponse = await lastValueFrom(serverResponse$); let responseUser!: IUser; if(serverResponse.error) { this.errorHandling(serverResponse.error); this.grid.selectRow(0); this.grid.deleteRecord(); } else { if(serverResponse.serverData?.data !== undefined) { responseUser = serverResponse.serverData?.data; // this.usersData?.push(responseUser) // this.grid.refresh(); this.grid.updateRow(0, responseUser); this.grid.selectRow(0); } } } private async updateUser(){ this._loggingService.debug("Updating User start") this.prepareUserForSave(); let index = this.selectedRowIndex !== undefined ? this.selectedRowIndex : 0 let serverResponse$ = this._userService.updateUser$(this.userForm) let serverResponse = await lastValueFrom(serverResponse$); let responseUser!: IUser; if(serverResponse.error) { this.errorHandling(serverResponse.error); this.grid.selectRow(index); } else { if(serverResponse.serverData?.data !== undefined) { responseUser = serverResponse.serverData?.data; this.grid.updateRow(index, responseUser); this.grid.selectRow(index); } } } rowSelected($event: RecordClickEventArgs) { this.selectedRowIndex = $event.rowIndex; } togglePassword() { this.showPassword = !this.showPassword; } private prepareUserForSave() { this.userForm.roles = this.getRoleObjFromSelectedRoles(); this.userForm.organization = this.getOrgObjFromSelectedOrg(); } private getRoleObjFromSelectedRoles(): IRole[] { let userRoles: IRole[] = []; if(this.selectedRoles !== undefined) { this.selectedRoles.forEach(roleId => { let userRole = this.rolesMap.get(roleId); if(userRole !== undefined) { userRoles.push(userRole); } }) } return userRoles; } private getOrgObjFromSelectedOrg(): IOrganization { let org = new Organization(); org.id = this.selectedOrg; return org; } private errorHandling(serverError: ServerError) { this._loggingService.error(serverError); if(serverError.status == 401) { this.serverError = "Un-Authenticated, please logout and login again." } else if(serverError.status == 403) { this.serverError = "Un-Authorized, please contact your administrator." } else { this.serverError = serverError.displayMessage == null ? serverError.message : serverError.displayMessage; } }}HTML Code:

Error ! {{serverError}}

Locked

Expired

Enabled

Pavithra Subramaniyam · Answer

Hi Surabhi Gangwar,We have tried to reproduce the issue “script error while saving
the edited data” at our end but it is working fine at our end. Please refer to
the below sample for more information.https://stackblitz.com/edit/angular-qx2jea?file=app.component.ts,app.component.html,app%2Fapp.module.ts,order.service.tsSince there is more customization in your sample, we could
not replicate the exact scenario and it seems that the issue occurs only in
your sample. So could you please share an issue reproducible sample or hosted
link for further validation that will be very helpful for us to validate the
issue and provide a better solution as early as possible.Regards,Pavithra S

Surabhi Gangwar · Answer

Hi Pavithra,Sure, I will try to host somewhere where you can access that and will share the link with you.Anyways, thanks for your reply.

Surabhi Gangwar · Answer

I am able to solve this problem by adding following code:actionComplete($event: any) {    if($event.requestType === 'add' || $event.requestType === 'beginEdit') {        $event.form.ej2_instances[0].rules = {};    }}

Pavithra Subramaniyam · Answer

Hi Surabhi Gangwar,We are happy to hear that you have solved the issue.Please get back to us if you need further assistance.Regards,Pavithra S