We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ListView getting slow when change the data source

Hi All,

I'm using "ng-template" for binding "Color Picker" inside the ListView control. Code like below,

<div class="mdl-cell mdl-cell--12-col prj-padding-v-10px prj-border" style="height: 25vh; overflow: auto">
<ejs-listview #selectedListView id='selected-data-list' [dataSource]='listData' [showCheckBox]='true'>
<ng-template #template let-data="">
<div class="e-list-wrapper">
<span class="e-list-item-header">{{data.text}}</span>
<span class="e-list-content" style="float:right"><input ejs-colorpicker type='color' value="#b3b3b3"
mode="Palette" /></span>
</div>
</ng-template>
</ejs-listview>
</div>


The problem is when I re-setting the data source value according to some event fired, ListView getting significantly slow when scrolling. How to solve this problem? If "color-picker " bind is wrong please advice me to implement correct way.


6 Replies

CI Christopher Issac Sunder K Syncfusion Team February 28, 2019 06:59 AM UTC

Hi Shamil, 

Thank you for contacting Syncfusion support. 

We have analyzed your reported issue and we found that you have rendered colorpicker for each item in the listview template. Generally, listview will relatively faster for high data load pressure but in your case the slow is due to the colorpicker component and its popups’ elements. 

When we render a colorpicker component, it creates a button and dropdown popup element for its behavior. When we render colorpicker inside each item of listview, it will create for each item x 2 button element and dropdown popup elements. Even though this itself will slow down the process, the real slow is on scrolling the listview. When we scroll listview items the each colorpicker popup element will update its position for each of its target element (inspect and check in developer tools). This is CPU heavy task, hence the slow down occurs. 

We can approach this issue in two ways, (1) keeping only one colorpicker for all the listview item entirely isolated from listview or (2) we can render colorpicker on demand using EJ2 tooltip component. 
We have attached a sample using 2nd method. Basically we will render listview in template with button. On button click event we will open a tooltip for that button. Inside tooltip on afterOpen event (from tooltip event) we will initialize the colorpicker component. Thus we can keep performance and only one colorpicker at a time. 


Please get back to us for further assistance. 

Thanks,
Christo



NE Neo replied to Christopher Issac Sunder K February 28, 2019 10:39 AM UTC

Hi Shamil, 

Thank you for contacting Syncfusion support. 

We have analyzed your reported issue and we found that you have rendered colorpicker for each item in the listview template. Generally, listview will relatively faster for high data load pressure but in your case the slow is due to the colorpicker component and its popups’ elements. 

When we render a colorpicker component, it creates a button and dropdown popup element for its behavior. When we render colorpicker inside each item of listview, it will create for each item x 2 button element and dropdown popup elements. Even though this itself will slow down the process, the real slow is on scrolling the listview. When we scroll listview items the each colorpicker popup element will update its position for each of its target element (inspect and check in developer tools). This is CPU heavy task, hence the slow down occurs. 

We can approach this issue in two ways, (1) keeping only one colorpicker for all the listview item entirely isolated from listview or (2) we can render colorpicker on demand using EJ2 tooltip component. 
We have attached a sample using 2nd method. Basically we will render listview in template with button. On button click event we will open a tooltip for that button. Inside tooltip on afterOpen event (from tooltip event) we will initialize the colorpicker component. Thus we can keep performance and only one colorpicker at a time. 


Please get back to us for further assistance. 

Thanks,
Christo


Hi Christopher,

I went through your code and changes done in my project. But I'm getting error as below, (Compiled successfully)

-- Browser console log --

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'showTipPointer' since it isn't a known property of 'ejs-tooltip'.
1. If 'ejs-tooltip' is an Angular component and it has 'showTipPointer' input, then verify that it is part of this module.
2. If 'ejs-tooltip' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("nsOn="Custom" (afterOpen)="afterTooltipOpen($event)"
            (afterClose)="afterClose($event)" [ERROR ->][showTipPointer]="showTipPointer">
            <ejs-listview #selectedListView id="selected-data-lis"): ng:///DataServicesModule/ReviewEditComponent.html@67:46
'ejs-tooltip' is not a known element:
1. If 'ejs-tooltip' is an Angular component, then verify that it is part of this module.
2. If 'ejs-tooltip' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

-- Imports --

import { ListViewComponent, SelectEventArgs } from '@syncfusion/ej2-ng-lists';
import { TooltipComponent } from '@syncfusion/ej2-angular-popups';
import { closest } from '@syncfusion/ej2-base';
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';


Note: '@syncfusion/ej2-angular-lists' not supported in my project. I used '@syncfusion/ej2-ng-lists' instead of that.



NE Neo March 1, 2019 12:41 PM UTC

Problem solved. Added 'TooltipModule' in module.ts. and changed imports to 'ej2-angular-lists'

Thank you.


CI Christopher Issac Sunder K Syncfusion Team March 4, 2019 02:18 AM UTC

Hi Shamil, 

We are glad to know that the issue has been resolved at your end. As you mentioned, We recommended using ej2-angular-lists instead of ej2-ng-lists because we have deprecated the support for ej2-ng-lists. Hereafter all the bugs, patch and volume releases will comes only under ej2-angular-lists. 

Thanks, 
Christo


NE Neo replied to Christopher Issac Sunder K April 5, 2019 10:01 AM UTC

Hi Shamil, 

We are glad to know that the issue has been resolved at your end. As you mentioned, We recommended using ej2-angular-lists instead of ej2-ng-lists because we have deprecated the support for ej2-ng-lists. Hereafter all the bugs, patch and volume releases will comes only under ej2-angular-lists. 

Thanks, 
Christo

Hi Sunder,

I have problem with that custom colorpicker component. When increasing the length of item value, It will overlapped and won't be able to pick color. Please help me to avoid this issue using better solution. (Appreciate if you can add new line to long item and show color picker button on the 2nd line)

Thank you.


CI Christopher Issac Sunder K Syncfusion Team April 9, 2019 06:14 AM UTC

Hi Isanka,  

We can achieve your requirement by adding a CSS Class to the Listview component as 'e-list-template' and everything will be aligned as you expected. As you requested the colorpicker component also will be in the second line of the list item.
You can learn more about the template option here.
Docs: https://ej2.syncfusion.com/angular/documentation/listview/customizing-templates/?no-cache=1
Sample: http://www.syncfusion.com/downloads/support/forum/142929/ze/list-color-picker-1671360405  
  
Thanks, 
Christo 


Loader.
Up arrow icon