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

Edit Dialog with ComboBoxComponent not working


I have set up a template for edit dialog in a simple grid. 

I follow the demo, when adding new value to the combo with the demo/example code from: https://ej2.syncfusion.com/angular/documentation/grid/edit/?no-cache=1#template-driven-forms

The dialog opens and all values are shown right, but I notice there is an error in console for the line that sets the focus to the first input. The code in context is here.
 (args.form.elements.namedItem('CustomerID') as HTMLInputElement).focus();
The console error is Cannot read property 'focus' of null

Within this template, I setup a combobox for a field. I am following the demo/sample from: https://ej2.syncfusion.com/angular/demos/#/material/combo-box/custom-value

The values being displayed are correct. However, I notice there is an error when typing new value to the combo. The code in context is here.
let customValue: string = (this.comboObj.element.getElementsByClassName('e-input')[0] as HTMLInputElement).value;
The console error is: Cannot read property 'element' of undefined
It is confusing as to how it is working on the demo. I am unable to locate any HTMLElement with tag or id or name or cssClass with value 'e-input'. Obviously its throwing an error for me, but please do share how the demo is working, so I can fix my code too.

Thanks and best regards,

1 Reply

NP Narayanasamy Panneer Selvam Syncfusion Team October 7, 2019 11:03 AM UTC

Hi Sathya, 
Good day to you. 
We have validated your query. Please find the validation details in below,  
Query-1: Console error when edit dialog is opened in grid 
We checked your query – “” and suspect you might be facing this issue due to specifying wrong element id for focusing the input element. In the ng-template we have specified the form elements to be rendered when the edit dialog is opened.  Please find the code example in below, 
Code example: 
<ng-template #editSettingsTemplate let-data>  
<div class="e-float-input e-control-wrapper" [ngClass]="{'e-error': CustomerID.invalid && (CustomerID.dirty || CustomerID.touched)}">  
    <input [(ngModel)]="orderData.CustomerID" required id="CustomerID"name="CustomerID" type="text" #CustomerID="ngModel">  
    <span class="e-float-line"></span>  
    <label class="e-float-text e-label-top" for="CustomerID">Customer Name</label>  

And based on the input element id we have focused it in the actionComplete event. 
actionComplete(args: DialogEditEventArgs): void {  
      if((args.requestType === 'beginEdit' || args.requestType === 'add')) {  
          args.form.ej2_instances[0].rules = {};  
          if (args.requestType === 'beginEdit') {  
             // Set initial Focus  
             (args.form.elements.namedItem('CustomerID') as HTMLInputElement).focus();  

So please ensure if you have specified the correct input element id to be focused in the actionComplete event. 
We have prepared a sample for your reference. You can find it below,  
Query-2: console error is: Cannot read property 'element' of undefined 
We were unable to reproduce the reported issue and we suspect that the reported issue may be caused due to adding the new item using an external button click action.  
We have prepared the sample and attached it below. 
Please check the above sample and still issue persists, revert us with issue reproducing sample or modify the shared sample to reproduce a reported issue that will help us to check and provide the exact solution. 

Narayanasamy P. 

Live Chat Icon For mobile
Up arrow icon