The change event doesn't trigger when using editTemplate and focusing a dropdownList.

Hi,

I'm currently working in an Angular project, and I have some issues. I'm using a grid with three columns, and one of them is a dropdownList, Each column has an editTemplate. The problem is, that when I focus on the dropdownList, the change event doesn't trigger. 

As you can see in the picture, I have three events in the editTemplate, in a ejs-textBox. But after focusing the dropdownList, it only triggers the keydown.tab and the keydown.enter events.

          (keydown.tab)="change($event, 'nombre', data)"
          (keydown.enter)="change($event, 'nombre', data)"
          (change)="change($event, 'nombre', data)"

I have another grid where there is no dropdownList, and in that, it doesn't happen the issue I am talking about.

I cannot replicate exactly the isssue, but here is an stackblitz where you can see my code, In this stacblitz, when you tab or click out of the grid, the data changes and saves, but when you click enter, the data doesn't change, and this error appears in the console.

ERROR TypeError: Cannot read properties of null (reading 'changes')

Here is the link: https://stackblitz.com/edit/angular-y6g5bk-dzfmpu?file=app.component.ts,app.component.html,app.provincias.ts,app%2Fapp.module.ts,main.ts,package.json,index.html

PD: Apart from that, i would like to know if there is another way to limit the max length of one column. You can do it with [validationRules]="-----", but it allows you to continue typing, even it you have passed the max length. But, is there a way (apart from maxLength attribute in the ejs-textBox) to limit the maxLength of a column data, in the way that it doesn't allow you to write more when you exceed the maxLength?

Thank you,

David.


1 Reply

KP Kokila Poovendran Syncfusion Team September 27, 2023 12:05 PM UTC

Hi David P.G.,


Greeting from Syncfusion support!


Query 1: After focusing the dropdownList, it only triggers the keydown.tab and the keydown.enter events.


We have carefully reviewed your issue, but we couldn't replicate it in our testing using the provided StackBlitz sample. It seems like the dropdown change event is not triggered when focusing on the dropdown, but it should trigger when you change the values from the dropdown list. To help us better understand and address your issue, could you please provide more specific details about your use case and possibly share a video illustration of the problem if possible? This would assist us in identifying and resolving the issue you're facing.


Regarding your second query:


Query 2: Would like to know if there is another way to limit the max length of one column.


To limit the maximum number of characters in a textbox column, the `max-length` property is indeed the recommended way to achieve this. There is no other built-in property or attribute to restrict input beyond the specified character limit. You can utilize the `max-length` attribute in the `ejs-textBox` to enforce this limitation effectively.


For more details on the `max-length` attribute, you can refer to the API documentation: https://ej2.syncfusion.com/angular/documentation/api/textbox/#htmlattributes



Loader.
Up arrow icon