This is a migrated thread and some comments may be shown as answers.

Conditional ListItem Color in ListView

1 Answer 159 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 31 Jul 2012, 07:24 PM
Hello

I'm using the ListView to display different items. The item should have a different back color depending on the status of the item.
I was able to change the background-color of a element within the <li> by doing something like this:
<div ${data.Status == 0 ? "style=\"background-color:orange;\"" : (data.Status == 1 ? "style=\"background-color:darkred\"" : "style=\"background-color:darkgreen\"")}></div>
But here I still have the borders of the <li> element. Therefore I would like to set the background-color directly in the <li> element to solve the issue.

Is there a way to set the background-color of the ListItem depending on my Status-Property?

I found a way how to access the css of the parent.
http://stackoverflow.com/questions/258317/jquery-changing-background-of-parent-div 
But somehow I wasn't able to use this in the template.

Thanks in advance!

Kind Regards
Bruno

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 02 Aug 2012, 12:02 PM
Hello Bruno,

I already answered your support ticket, but I will post the same answer here for completeness:

You can use negative margin to cover the list item. For instance the .km-listview-link class applied on list item links has such margin:
.km-root .km-listview-link
{
    margin: -.5em -.7em;
}


Kind regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ListView (Mobile)
Asked by
Michael
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Share this question
or