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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to achieve the alternate row styling in ListView?

Thread ID:

Created:

Updated:

Platform:

Replies:

151383 Feb 10,2020 09:23 AM UTC Feb 13,2020 05:16 AM UTC Angular - EJ 2 5
loading
Tags: ListView
alon
Asked On February 10, 2020 09:23 AM UTC

How to achieve the alternate row styling in ListView?

Sowmiya Padmanaban [Syncfusion]
Replied On February 11, 2020 06:28 AM UTC

Hi Alon,  
 
Greetings from Syncfusion support. 
 
We have checked your reported query for different styling for each record in ListView component. In ListView component, it is possible to add the HtmlAttributes for each record. Using that attributes, you can align style based on your requirement for each record. 
 
Refer the below code snippet. 
 <ejs-listview id='listview' [dataSource]='groupData' [fields]='fields'></ejs-listview> 
 
public fields: Object = { htmlAttributes:'Attributes'}; 
public groupData: any = [ 
    { 
        "text": "Audi A4", 
        "id": "9bdb", 
        "category": "Audi", 
        "Attributes": {class:"list1"} 
    }, 
    { 
        "text": "Audi A5", 
        "id": "4589", 
        "category": "Audi", 
        "Attributes": {class:"list2"} 
    }, 
]; 
<style> 
  #listview .list1 { 
    background-color:blue; 
  } 
  #listview .list2 { 
    background-color: skyblue; 
    font-style: italic; 
    color: Yellow; 
  } 
</style> 

Refer the below sample link for your reference. 
 
Please let us know, if you need any further assistance on this. 
 
Regards,  
Sowmiya.P 



alon
Replied On February 11, 2020 07:06 AM UTC

Thanks for your fast and detailed reply.

I am afraid the problem with that solution that it won't work properly when the end user manipulates the list view.
For example the user reorder or filter the list-view.

I think the solution should not rely on the data-source - I think it should use an event of the view (ListViewComponent).
something like the queryCellInfo of GridComponent - but I could not find the relevant event

Regards, 
alon


Sowmiya Padmanaban [Syncfusion]
Replied On February 12, 2020 09:14 AM UTC

Hi Alon, 
 
We have checked your reported query that your requirement is to apply styling for the alternate row. You can apply your styling using CSS styles based on your requirement. In that case, there is no need for event. 
 
Refer the below code snippet. 
<style> 
#listview li:nth-child(even) { 
  background-color: blue; 
  font-style:italic; 
} 
 
#listview li:nth-child(odd) { 
  background-color: skyblue 
} 
</style> 

Refer the below sample link. 
 
If we misunderstand your query or if you want perform any custom operation. Can you please share the exact requirement about your requirement, it will helpful for us to  resolve your issue at earlier. 
 
Please let us know, if you need any further assistance on this. 
 
 
Regards,  
Sowmiya.P 


alon
Replied On February 12, 2020 05:43 PM UTC

Thank you very much.
It is very helpful.

Sowmiya Padmanaban [Syncfusion]
Replied On February 13, 2020 05:16 AM UTC

Hi Alon,  
  
We are happy to hear that the provided solution resolved your issue. Please let us know if you need any further assistance on this. 
  
  
Regards,  
Sowmiya.P 


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

Live Chat Icon For mobile
Live Chat Icon