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

Subscribe to this post

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.

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,

Sathya

Reply | Reply with quote

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>

<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.

Reply | Reply with quote

Edit Dialog with ComboBoxComponent not working

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US