Edit Dialog with ComboBoxComponent not working

[Sathyanarayanan Srinivasan]

Hi,

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

1)

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

2) 

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,

Sathya

[Narayanasamy Panneer Selvam]

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>  

</div>  

</ng-template>  

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,  

Sample: https://stackblitz.com/edit/angular-kypaki-5pibwr  

 

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. 

Sample Link: https://stackblitz.com/edit/angular-zgymbm?file=app.component.html 

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. 

Regards, 

Narayanasamy P.