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

    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
  2. Kamen Bundev
    Admin
    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!
  3. Kendo UI is VS 2017 Ready
Back to Top