Drop-Down Value Resetting on Edit in Angular EJS-Grid – What's the Fix?

[Alisa Aine]

Hello everyone,

I hope this message finds you well. I am currently developing a web application on my ai pc using the Angular - EJ2 Grid v19.1.67 (https://ej2.syncfusion.com/angular/documentation/grid/getting-started ). I’ve encountered a significant challenge that I hope you can help me with.

While working with the EJS-Grid component, I've noticed that the drop-down values are resetting every time I attempt to edit a row. This is quite frustrating, as it disrupts the user experience and leads to confusion for users who expect the selected value to remain visible while editing. I understand that maintaining the state of form elements during edits is crucial for usability, especially in data-intensive applications like mine.

I have tried a few approaches to resolve this issue on my AI PC, such as manually binding the drop-down value to the model and ensuring that the grid's data source is correctly updated. However, I still face challenges in keeping the selected drop-down value intact.

Given the functionality of the [Angular - EJ2 Grid v19.1.67], I would appreciate any insights or recommendations from those who may have faced similar issues. Are there specific properties or methods within the EJS-Grid API that I should be leveraging? Additionally, if there are any best practices for managing drop-down states during editing, I would like to hear about them.

Thank you in advance for your help! Your expertise and experience would be incredibly valuable as I work to enhance the functionality of my application.

Best regards,
Alisa

[Santhosh Iruthayaraj]

Hi Alisa Aine,

Greetings from Syncfusion Support.

By default, the DropDownList component only displays a value in the input box if the value exists in its dataSource. If the value is not present in the dataSource, it is considered invalid and will not be displayed. Therefore, ensure that the value assigned to the DropDownList during editing is available in its dataSource.

For your reference, we have attached a sample below demonstrating this behavior. The dropdown is populated with three countries: “France”, “Germany”, and “Brazil”, while the Grid contains two records with the "Ship Country" fields set to “France” and “USA”.

When editing the first row, the dropdown will display the value "France" since it is present in the dataSource. However, when editing the second row, the value "USA" will not be displayed, as it is not available in the dropdown's dataSource.

Sample: https://stackblitz.com/edit/angular-ks77gr

[demonstration]

We hope this explanation and demonstration address your concerns. Please let us know if you need any further assistance.

Regards,
Santhosh I

[Tito Kunze]

Hi there! I understand the frustration with drop-down values resetting during row editing in the EJ2 Grid. This issue is often related to how the grid’s data source and editing components are bound. A solution is to ensure that the selected value is properly synced with the grid's model during the edit process.

One method to handle this is by using the editSettings property with formValidation set to true, which ensures that the selected value persists when editing. Also, try binding the value property of the drop-down dynamically to your model field during the actionBegin event to retain the value.

Additionally, make sure that the grid’s edit event is fired correctly, and update the corresponding field values in the underlying data source. You can also use grid.refresh() to force a re-render if the grid is not reflecting the updated values.

Hope this helps!

[Dineshnarasimman Muthu]

Hi,

Thanks for the update regarding the setting dropdownlist value upon editing in the grid.

Regards,

Dineshnarasimman M