ListView getting slow when change the data source

[Neo]

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.

[Christopher Issac Sunder K]

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/142929/ze/list-color-picker1684215294 

Please get back to us for further assistance. 

Thanks,
Christo

[Neo]

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/142929/ze/list-color-picker1684215294 

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.

[Neo]

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

Thank you.

[Christopher Issac Sunder K]

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

[Neo]

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.

[Christopher Issac Sunder K]

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