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

How to achieve the alternate row styling in ListView?

How to achieve the alternate row styling in ListView?

5 Replies

SP Sowmiya Padmanaban Syncfusion Team 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 




AL alon 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



SP Sowmiya Padmanaban Syncfusion Team 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 



AL alon February 12, 2020 05:43 PM UTC

Thank you very much.
It is very helpful.


SP Sowmiya Padmanaban Syncfusion Team 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 


Loader.
Up arrow icon