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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ListView getting slow when change the data source

Thread ID:

Created:

Updated:

Platform:

Replies:

142929 Feb 26,2019 08:16 AM UTC Apr 9,2019 06:14 AM UTC Angular - EJ 2 6
loading
Tags: ListView
Neo
Asked On February 26, 2019 08:16 AM UTC

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 [Syncfusion]
Replied On 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


Neo
Replied On 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.


Neo
Replied On March 1, 2019 12:41 PM UTC

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

Thank you.

Christopher Issac Sunder K [Syncfusion]
Replied On 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

Neo
Replied On 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.

Christopher Issac Sunder K [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;