Performance problem with ListView using templates

[Cesar Smerling]

Hello! We have some performance problems when we are using the list view with the item template. The list is refreshed receiving a new data source of items.

When the refresh occurs the new items are created but the old ones never gets destroyed, so doing a lot of refreshed creates a performance issue.
The problem is when using the <ng-template #template let-data> because the component that creates this templates is the same component that is parent of the ejs-list, so until I destroy the parent component the items will never call the destroy method.

There is another way to inject the ng-template for the item

[Shalini Maragathavel]

Hi Cesar, 

Greetings from Syncfusion support. 

Based on your query, we understand that you are facing performance issue while rendering ListView using templates. So, we have prepared a ListView with template sample and tried to reproduce the issue by changing the ListView data source. But unfortunately, we are unable to reproduce it as the ListView data changed properly without any performance issue.  

We have attached our validated sample for your reference. 

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

If your reported problem persists, then please share the following information to validate further.  

• If possible, replicate your reported problem in the above sample or provide a simple sample to replicate the issue.
• Total number of list items in the data source along with your code block.
• Elaborate on your issue in detail with pictorial or video demonstration(if possible).
• Syncfusion package version.

This information would help us to find the exact cause of reported problem and to provide you the prompt solution.  

Regards, 
Shalini M. 

[Cesar Smerling]

Hi, in the example you give me you are templating a simple text and the update of the datasource is always the same object. I cannot share the code because of company rules, and I don't have the time to build a large example to do so.
The problem appears when creating a component (that have several child components) in the template (you can try with buttons, dropdowns buttons, avatar, all syncfusion components).

In our case we have an Angular component (list-item) that have several childs components too ejs-buttons, ejs-dropdowns and other custom components for display. In the case of dropdowns you will see attached to body all the items for that dropdown, for example.

The main problem when using Angular ng-template is that the component inside the template nevers get destroyed (never calls ngDestroy) and when refreshing the data source new items are created. Only when the parent that creates the ejs-list is destroyed the items are also destroyed. This is the way that angular does.

I want to know if there is another way the template the item without using the ng-template in the parent or is a way to force the list to destroy the items

If I make the time to build an example I will, in the mean time I hope this helps to test the list.
Thanks

[Cesar Smerling]

Hi!, I make additional testing and find out something more in the list view.

The actionBegin event always fires undefined event. I added to the example

The update data source is one time, so performance issue will never appear.

https://stackblitz.com/edit/angular-hqnqpk-4fnuci?file=app.component.ts

[Shalini Maragathavel]

Hi Cesar, 

Thanks for the details. 

Query#1: The problem appears when creating a component (that have several child components) in the template (you can try with buttons, dropdowns buttons, avatar, all syncfusion components). 

Based on your query, we can understand that you cannot share the ListView code as per your rules. So, we have prepared a ListView with template(containing dropdowns and buttons) sample according to your scenario to replicate the reported performance issue while updating the data source but unfortunately, we are unable to reproduce the mentioned issue at our end. 

We have attached our validated sample for your reference.

Sample: https://stackblitz.com/edit/angular-hqnqpk-l5xebk?file=app.component.ts 

If your reported problem persists, then please modify the above sample similar to your use case scenario(exact code/data is not needed) as an example to replicate the reported performance issue in the ListView. So that we can check from our end and provide the prompt solution.  

Query#2: The actionBegin event always fires undefined event

We checked your query and would like to let you know that currently we have not returned any arguments in actionBegin event of ListView component. Do you wish to return aguments in the actionBegin event as like in our Grid component(GridActionEventArgs)? If so, please share your exact use case and what are the details do you wish to return in the arguments of actionBegin event of ListView. This will help us to serve you better. 

Regards,  

Shalini M. 

[Cesar Smerling]

Hi!

Problem 1: Components inside the template are not destroyed.

Problem 2: Dropdown Buttons (I said buttons, not dropdown List, like you create in the example), create html tags in the body, and they are never destroyed (problem 1) this elements tags are never clean from the html.

---

About the ActionBegin, I was trying to find a workaround for this problems I thought that the event could help me.
I cannot found a workaround so I move our company list the angular material and with a simple ngFor drawing the list items when refreshing the data source the items are destroyed.

I will mention this problems to our company so we can start evaluating a new library for components, there are other several problems that I already mention in others forums post. The problems of the library are starting to accumulate so we better start moving our project to another one.

[Cesar Smerling]

Here is an example:

https://stackblitz.com/edit/angular-hqnqpk-ghb6eg?file=app%2Ftest-component.ts

I refactored the update to every click the list is refreshed.

Changed the dropdown list to dropdown buttons, you can see in the body that dropdowns are created an never destroyed (like show in the images shared)

Also, I created a custom components (test-component) that logs on constructor, on init and on destroy. Clicking on refreseh NEVER calls ngDestroy of the component.

Attachment: Desktop_6772aa6a.zip

[Shalini Maragathavel]

Hi Cesar, 

Thanks for sharing the details.

We have checked your query and you can resolve the reported issue by setting the createPopupOnClick property as true in Dropdown Button as demonstrated in the below code snippet,  

  <ejs-listview 

    id="listview_template" 

    #listviewInstance 

    [dataSource]="data" 

  > 

    <ng-template #template let-data=""> 

      <div class="e-list-wrapper"> 

          <div style="float:left"> 

              <app-test></app-test> 

              <button 

                ejs-dropdownbutton 

                [items]="items" 

                createPopupOnClick="true" 

              > 

                {{ data.text }} 

              </button></span>          </div> 

        </ng-template> 

  </ejs-listview> 

</div> 

Please find the below sample for your reference 

Sample: https://stackblitz.com/edit/angular-hqnqpk-6ugbez?file=app.component.html  

API: https://ej2.syncfusion.com/angular/documentation/api/drop-down-button/#createpopuponclick  

Please get back to us if you need further assistance.

Regards,
Shalini M. 

[Cesar Smerling]

Hello.

Thanks but doesn't resolve Problem 1.

I beginning to think that you don't read the posts and you didn't enter the example link.

The dropdown button problem is originated as part of Problem 1.

I'll ask again. How I can Destroy components inside template??

Thanks

[Shalini Maragathavel]

Hi Cesar, 

Sorry for the inconvenience. 

We checked your query, and you can clear the components inside the ng templates using clearTemplate method. Please refer the below code snippet for your reference, 

update() { 

    if(this.listviewInstance.dataSource !== this.data1){ 

      this.listviewInstance.clearTemplate(); 

      this.listviewInstance.dataSource = this.data1; 

    } 

} 

Please find the below sample for your reference, 

Sample: https://stackblitz.com/edit/angular-hqnqpk-nztlnf?file=app.component.ts

Please let us know if you need any further assistance.

Regards,   

Shalini M. 

[Cesar Smerling]

Thanks, that seems to work in the example.

We already move our list to angular material.

Why the "clearTemplate()" method is not in the documentation??. It will be good that add that to the API docs

[Sharon Sanchez Selvaraj]

Hi Cesar, 

Thanks for the update.

We are glad to hear that the provided suggestions helped you. We have considered your request regarding clearTemplate internally and will publish a KB with the updated details in any one of the upcoming weekly patch releases. 

Regards, 

Sharon Sanchez S.