How to achieve the alternate row styling in ListView?

[alon]

How to achieve the alternate row styling in ListView?

[Sowmiya Padmanaban]

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. 

https://stackblitz.com/edit/angular-f6hobz?file=app.component.html 

 

Please let us know, if you need any further assistance on this. 

 

Regards,  

Sowmiya.P 

[alon]

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]

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. 

https://stackblitz.com/edit/angular-f6hobz-x4p3ky?file=app.component.html 

 

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]

Thank you very much.

It is very helpful.

[Sowmiya Padmanaban]

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