List View overlapping items

[Neo]

Dear all,

According to my previous thread that I created ListView item with color picker. All functional requirements are working perfectly. But only problem is 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)

Original thread :- https://www.syncfusion.com/forums/142929/listview-getting-slow-when-change-the-data-source

Thank you.

[Balachandar Murugesan]

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 

 

Regards, 

Balachandar M. 

[Neo]

Hi,

I tried like you mentioned. But didn't work. I put cssClass="e-list-template" and listview-colorpicker-container in .html. Also added ,

.e-list-wrapper .e-list-content.listview-colorpicker-container {

text-align: left;

}

[Christopher Issac Sunder K]

Hi Isanka, 

With the above mentioned code, the listview should be automatically adjusted its with based on the content while using template and the 

colorpicker should be on the second line. If doesn't work, then it could be due to older version of the listview where the 

CSS templating features aren't implemeted.  

Could be please update us the package details of the EJ2 components you are using in your project? or you can try updating 

the EJ2 components to the latet versions and get it working. Also we have attached a live version of sample for your  

reference. 

Sample: https://codesandbox.io/s/xlz86xjz9w 

Thanks, 

Christo 

[Neo]

Hi Isanka, 

With the above mentioned code, the listview should be automatically adjusted its with based on the content while using template and the 

colorpicker should be on the second line. If doesn't work, then it could be due to older version of the listview where the 

CSS templating features aren't implemeted.  

Could be please update us the package details of the EJ2 components you are using in your project? or you can try updating 

the EJ2 components to the latet versions and get it working. Also we have attached a live version of sample for your  

reference. 

Sample: https://codesandbox.io/s/xlz86xjz9w 

Thanks, 

Christo 

Hi Sunder,

Before doing that modification, I want to do high priority task. How to set first item default color without opening pop ups when page load? (Should be done inside the .TS file)

[Christopher Issac Sunder K]

Hi Isanka, 

You can dynamically change the color by assigning the color inside the data source. 

Then you need to add the background-color property to the color picker and assign the data source color variable to the background-color property value. Automatically the color will update inside the color picker. Then you need to assign the color picker value as data source color variable. Then only the selected color-based color picker popups will be open. 

We have created a sample based on query. Please refer the below online sample and modify the sample if you have any concerns 

Sample: https://codesandbox.io/s/xpmxmyvymp 

Thanks,
Christo