Conditional ListItem Color in ListView

2 posts, 0 answers
  1. Bruno
    Bruno avatar
    1 posts
    Member since:
    Nov 2010

    Posted 31 Jul 2012 Link to this post


    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. 
    But somehow I wasn't able to use this in the template.

    Thanks in advance!

    Kind Regards
  2. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 02 Aug 2012 Link to this post

    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!
Back to Top