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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Edit Dialog with ComboBoxComponent not working

Thread ID:

Created:

Updated:

Platform:

Replies:

148078 Oct 4,2019 08:06 AM UTC Oct 7,2019 11:03 AM UTC Angular - EJ 2 1
loading
Tags: ComboBox
Sathyanarayanan Srinivasan
Asked On October 4, 2019 08:06 AM UTC

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 [Syncfusion]
Replied On 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>  
</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,  
 
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. 

Regards,
 
Narayanasamy P. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon