Grid edit(Reactive Forms) Performance is slow

Question

While I was using the FormGroup to edit the Reactive Forms in the Grid, the more columns I added, the lower speed it responded. I wonder if you have better solutions for that.

When it was over 40 columns, it took 350MS or even longer for running a single-click event in the Grid.

15 Column

[Violation] 'mousedown' handler took 183ms

30 Column

[Violation] 'mousedown' handler took 282ms

40 Column

[Violation] 'mousedown' handler took 350ms

Sujith Kumar Rajkumar · Accepted Answer

Hi techlandandyzhang, 
 
Sorry for the delay in providing the response. 
 
Based on the provided information and shared sample we could see that you have rendered around 70 controls(textbox and datepicker) in the Grid’s edit template. We would like to let you know that for this case it will take some time to show the edit form since all the date picker and textbox controls needs to be initialized and rendered. This is its default rendering time taken for all the controls which is also the default html behavior when rendering huge number of controls dynamically in a edit form and so we cannot modify it. 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Rajapandiyan Settu · Answer

Hi techlandandyzhang, 
 
Thanks for contacting Syncfusion support. 
 
Before proceeding with your query, we need additional information on your requirement. So, please share the below details to validate further with this. 
 

Share the complete Grid code with the reactive forms?
What are controls do you rendered in the reactive forms?
Share the package.json file with us.
If possible, share the simple issue reproducible sample.
 
Regards, 
Rajapandiyan S

techlandandyzhang · Answer

1. Share the complete Grid code with the reactive forms?

Yes

2. What are controls do you rendered in the reactive forms?

Yes

What I did:

I tried to work out the reason, and I guess it is mainly affected by the Controls, the more complex of the Controls applied, the lower performance it presents.

Furthermore, there are many Custom Controls applying in the project, which lead to this problem being more obvious.

For example, I did a simple Template, when I only used ejs-textbox with total 70 columns, it worked well; however, after I replaced it by the ejs-datepicker, its performance slowed down much. And it was required to value the Date Controls. When I shifted between two records, it became so slow.

Q1: The project is with over 70 columns and many Custom Controls. Any better solutions to optimize?

Q2: Is it correct for the code of Custom datepicker Controls that I wrote?

Q3: I have customized the “Add New” function, to save the records first then add a new record, but it didn’t work. Does it need to setTimeOut?

Attachment: sync_54537f9c.zip