Cannot read properties of null (reading 'getAttribute') When edit row in a child Grid

Question

Hi,When I click on pencil icon for edit any row in a Child Grid, I get this error:ERROR TypeError: Cannot read properties of null (reading 'getAttribute')This is my code:this.childGrid = {      dataSource: this.data,      queryString: 'fKey',      columns: [          { field: 'description', headerText: 'Description', textAlign: 'Left', width: '50%', editTemplate: this.editMeasureDesc },          { field: 'qty', headerText: 'Qtà',  textAlign: 'Left', width: 20, editTemplate: this.editMeasureQty },          { field: 'width', headerText: 'Lar', editType:'NumericTextBox', textAlign: 'Left', width: 20, editTemplate: this.editMeasureWidth },          { field: 'length', headerText: 'Lun', editType:'NumericTextBox', textAlign: 'Left', width: 20, editTemplate: this.editMeasureLength },          { field: 'height', headerText: 'Alt', editType:'NumericTextBox', textAlign: 'Left', width: 20, editTemplate: this.editMeasureHeight },          { field: 'totalMeasure', headerText:  'Misura', editType:'NumericTextBox', textAlign: 'Left', width: 20, editTemplate: this.editMeasureTotalMeasure},          { headerText:'', width:20, commands: [{ type: 'Edit', buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' } },                                                     { type: 'Delete', buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' } },                                                     { type: 'Save', buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' } },                                                     { type: 'Cancel', buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-icons' }}]          },                ],      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, newRowPosition: 'Bottom', showDeleteConfirmDialog: true},      toolbar: ['Add'],      load() {                        localStorage.setItem('parentId', this.parentDetails.parentRowData['billOfMaterialsId']);           this.registeredTemplate = {};                    },            actionBegin: (args: SaveEventArgs) => {        this.measureActionBegin(args);      },      allowRowDragAndDrop: true,      rowDrop: (e) => {        this.measuresRowDrop(e);      },    }; async measureActionBegin(args: SaveEventArgs){    if (args.requestType === 'beginEdit') {      this.measureQty = args.rowData['qty'];       this.measureDesc = args.rowData['description'];       this.measureWidth = args.rowData['width'];       this.measureLength = args.rowData['length'];       this.measureHeight = args.rowData['height'];       this.measureTotalMeasure = args.rowData['totalMeasure'];     }  }The measureActionBegin function, is done correctly in debug, but when exit, I get the error on dev tools of Google Chrome. Can you help me solve the problem?Thanks

Ajith Govarthan · Answer

Hi Fabio, 
  
Thanks for contacting Syncfusion support. 
  
We have validated the provided information and we have confirmed it as a bug and logged the defect report “Script error throws when you edit child grid rows with command column buttons”. 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 including the defect fix in our upcoming weekly release which is expected to be rolled out on 8th December 2021. 
    
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.    
    
Feedback Link: https://www.syncfusion.com/feedback/30710/script-error-throws-when-you-edit-child-grid-rows-with-command-column-buttons 
  
Regards, 
Ajith G.

Fabio · Answer

The same error get on click on the cancel button.While if I click on save button the error is:ERROR TypeError: e.hasAttribute is not a function

Ajith Govarthan · Answer

Hi Fabio, 

Thanks for the update. 

Based on your query, you are facing script error when press the cancel and save button in your Grid application. So, we have prepared sample and found that the save and cancel button works fine at at our end without any script error at our end. For your convenience, we have attached the sample, please refer them for your reference. 

Code Example: 




App.component.ts 

{ 
          headerText: 'Actions', 
          width: 70, 
          commands: [ 
            { 
              type: 'Edit', 
              buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' }, 
            }, 
            { 
              type: 'Delete', 
              buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' }, 
            }, 
            { 
              type: 'Save', 
              buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' }, 
            }, 
            { 
              type: 'Cancel', 
              buttonOption: { 
                cssClass: 'e-flat', 
                iconCss: 'e-cancel-icon e-icons', 
              }, 
            }, 
          ], 
} 



Sample Link: https://stackblitz.com/edit/angular-axfn9v-4t5osb?file=app.component.ts 

If you still face the issue then, please try to reproduce the issue in the attached sample to find the root cause of the issue. 

Regards, 
Ajith G.

Fabio · Answer

In my application, I have the same code (you can check on my first post) and in your reply (26 November) you confirmed that it's a bug...So, what I do for solve this bug?Thanks

Ajith Govarthan · Answer

Hi Fabio, 

Thanks for the update. 


We can able to reproduce the script error issue only for edit command button at our end. So, we have logged issue for edit command button alone. To validate further on the save and cancel button related issues, please share the below details. 


Share the complete Grid code example.


Share the video demonstration of the reported issue.
 

Have you done any customization for command buttons using the command click handler?
 

Share the Syncfusion package version.
 
Regards, 
Ajith G.

Vignesh Natarajan · Answer

Hi Fabio, Thanks for your patience. We are glad to announce that our Essential Javascript2 patch release (v19.3.57) has been rolled out successfully and in that release we have added the fix of “Script error throws when you edit child grid rows with command column buttons” issue. So, please update your Syncfusion packages to the current version and use latest style script to get this. Release Notes: https://ej2.syncfusion.com/documentation/release-notes/19.3.57/?type=all#grid Find the below sample for your reference. Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/bill-of-material_modified279656005.zip In EJ2 Grid, we get the edited data from the input elements using its name attribute. But in your sample, you did not use the name attribute in the editTemplate which leads to some issues in saving the record. So, we suggest you bind the name property to resolve this. [app.component.html]

Description

Also, we found that there is no primary key column in Child-Grid. By default, all the CRUD actions in the EJ2 Grid are performed based on the primary key. So, we suggested you to set isPrimaryKey as true in any one of the unique columns. Refer to the below documentation. primaryKey: https://ej2.syncfusion.com/javascript/documentation/grid/edit/ https://ej2.syncfusion.com/javascript/documentation/api/grid/column/#isprimarykey [app.component.ts] this.childGrid = { columns: [ { field: 'billOfMaterialsCostAnalysisMeasuresId', isPrimaryKey: true, width: 30 }, { field: 'description', headerText: 'Description', textAlign: 'Left', width: '50%', editTemplate: this.editMeasureDesc }, ---- ], }; We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. Regards, Vignesh Natarajan