performance issue with textbox when loading multiple controls

[thowfik]

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

[Narayanasamy Panneer Selvam]

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.  

[thowfik]

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

[thowfik]

Hi, 

we are waiting for your reply,

Thanks in Advance

Regards

Thowbik

[Sureshkumar P]

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. 

 

<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12"> 

    <div class="e-float-input e-input-group"> 

        <input type="text" required> 

        <span class="e-float-line"></span> 

        <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 

[thowfik]

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

[thowfik]

Hi

this is to notify that we are waiting for your reply

Thanks in Advance

Regards

Thowbik

[thowfik]

Hi

this is to notify that we are waiting for your reply

Thanks in Advance

Regards

Thowbik

[Seeni Sakthi Kumar Seeni Raj]

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 

[Seeni Sakthi Kumar Seeni Raj]

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 

[thowfik]

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 

 

[Seeni Sakthi Kumar Seeni Raj]

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