performance issue with textbox when loading multiple controls

thowfik

Asked On September 4, 2019 05:49 AM UTC

Hi

we are facing performance issue for textbox control.

while typing the text if we load multiple controls like 5 grids in a single page,the entered text in a textbox taking too much time to appear.

the above mentioned performance issue is only with textbox and not with other controls like dropdown,checkbox,grid etc

i have attached a sample code for this kindly look at it

Thanks in Advance

Regards

Thowbik

Attachment: Demo_b7fc6006_15747383.zip

Reply | Reply with quote

Narayanasamy Panneer Selvam [Syncfusion]

Replied On September 6, 2019 02:24 PM UTC

Hi Thowfik,

Good day to you.

We have validated the given sample. In that sample, there may be a time delay due to the customizations applied in that sample. We have prepared a sample in the same scenario, issue is not reproduced. We suspect that you may update data on every value change event in textbox. Please view the sample which is given below,

Sample: https://stackblitz.com/edit/angular-textbox-multiple-grid?file=data.ts

If you have any queries, please explain more about your requirement.

Regards,

Narayanasamy P.

Reply | Reply with quote

thowfik

Replied On October 22, 2019 10:41 AM UTC

Hi Thowfik,

Good day to you.

We have validated the given sample. In that sample, there may be a time delay due to the customizations applied in that sample. We have prepared a sample in the same scenario, issue is not reproduced. We suspect that you may update data on every value change event in textbox. Please view the sample which is given below,

Sample: https://stackblitz.com/edit/angular-textbox-multiple-grid?file=data.ts

If you have any queries, please explain more about your requirement.



Regards,

Narayanasamy P.

Hi

we are facing performance issue for textbox control.

while typing the text if we load multiple ng-template in a single page,the entered text in a textbox taking too much time to appear.

if we long pres any key that text taking too much time to appear.

if issue is not reproduced run that sample code wait 5 minutes and then try.

i have attached a sample code for this kindly look at it

Thanks in Advance

Regards

Thowbik

Attachment: angulartextboxmultiplegrid_c19a3d2f.zip

Reply | Reply with quote

thowfik

Replied On October 25, 2019 09:51 AM UTC

Hi,

we are waiting for your reply,

Thanks in Advance

Regards

Thowbik

Reply | Reply with quote

Sureshkumar P [Syncfusion]

Replied On October 25, 2019 10:07 AM UTC

Hi Thowfik,

We would like to inform you that our EJ2 TextBox component is integrated from the native HTML 5 TextBox component. If we bind the change and input event for the native HTML 5 TextBox component, the same issue is reproduced with some delay. So, the reported issue is occurring in the Syncfusion TextBox component.

So, we suggest you use our CSS TextBox component to get rid of the reported issue.

<label class="e-float-text">Css TextBox</label>

</div>

Please find the sample from the below link. Here, we have rendered CSS textbox with multiple ng-templates.

Sample Link: https://stackblitz.com/edit/angular-147188-performance-issue-with-textbox-66pgqv?file=app.component.html

To know more about TextBox component, please find the below link.

UG Link: https://ej2.syncfusion.com/demos/#/material/textbox/default.html

Regards,

Sureshkumar P

Reply | Reply with quote

thowfik

Replied On October 25, 2019 02:58 PM UTC

Hi

i used your code but still i am getting performance issue mainly for textbox component while typing text.

while loading checkbox, textbox component inside ng template like this

<ng-template #template let-data>

<ejs-checkbox class="role-view" [checked]="data.edit"></ejs-checkbox>

</ng-template>

textbox getting slow if i remove the #template from ng-template the textbox is fast but it is not working i am getting [object][object].

i need to use textbox,Checkbox,dropdownlist all other component inside ng-template without any performance issue while typing text.

I have attached a sample code to report this issue kindly look at it.

Can you please help me to sort out this issue.

Thanks in Advance

Regards

Thowbik

Attachment: Demo_b7fc6006_15747383_1c521bcb.zip

Reply | Reply with quote

thowfik

Replied On October 30, 2019 11:15 AM UTC

Hi

this is to notify that we are waiting for your reply

Thanks in Advance

Regards

Thowbik

Reply | Reply with quote

thowfik

Replied On November 5, 2019 07:14 AM UTC

Hi

this is to notify that we are waiting for your reply

Thanks in Advance

Regards

Thowbik

Reply | Reply with quote

Seeni Sakthi Kumar Seeni Raj [Syncfusion]

Replied On November 5, 2019 10:52 AM UTC

Hi Thowfik,

Thanks for the update.

We have validated the issue and it occurs due to element weightage. However we are validating that if we can optimize the performance at our end. We will update the further details once completed the validation. Until then we appreciate your patience.

Regards,

Seeni Sakthi Kumar S

Reply | Reply with quote

Seeni Sakthi Kumar Seeni Raj [Syncfusion]

Replied On November 8, 2019 06:16 AM UTC

Hi Thowfik,

Thanks for your patience. We have validated the issue and changeDetectionStrategy of the angular component is caused the issue in your case.

In angular, there are two kind of change detection strategies available.

Angular Documentation: https://angular.io/api/core/ChangeDetectionStrategy

• Default:

Use the default CheckAlways strategy, in which change detection is automatic until explicitly deactivated. (i.e) if we enter the value into text box, change detection is getting triggered continuously for all template references. So that the reported issue occurs.

• OnPush:

Use the CheckOnce strategy, meaning that automatic change detection is deactivated until reactivated by setting the strategy to Default (CheckAlways). Once we enable this and enter value into text-box, change detection triggers only for input text-box alone instead of triggering change detection to all template references.

So we suggest you to use “changeDetection: ChangeDetectionStrategy.OnPush” strategy. Please refer below blog which will explain angular change detection in detail

Sample: https://stackblitz.com/edit/angular-textbox-ngtempllate-changedetection?file=app.component.ts

Regards,

Seeni Sakthi Kumar S

Reply | Reply with quote

thowfik

Replied On November 13, 2019 07:40 AM UTC

after using changeDetection: ChangeDetectionStrategy.OnPush the performance of the textbox while typing the text is better but the data is not loading in any grid or dropdown.

can you please help me to sort out this issue

Thanks in advance

Regards

Thowbik

Reply | Reply with quote

Seeni Sakthi Kumar Seeni Raj [Syncfusion]

Replied On November 14, 2019 07:24 AM UTC

Hi Thowfik,

Thanks for the update.

First we would like to inform you that, using changedetection property will not affect the data loading of the Grid or any other components. Also in our previous update, we have provided a sample with ChangeDetection strategy set as onPush . Which is working fine at our end. To validate further in this issue, please share the code example or reproduce the issue in given sample . It will help us to validate the issue, and provide a better suggestion as soon as possible.

Sample: https://stackblitz.com/edit/angular-textbox-ngtempllate-changedetection-s2v5tj?file=app.component.ts

Regards,

Seeni Sakthi Kumar S

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147188	Sep 4,2019 05:49 AM UTC	Nov 14,2019 07:24 AM UTC	Angular - EJ 2	11

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US