locked
ListView with odd/even render RRS feed

  • Question

  • Hi,

    I am developing a metro app in HTML/Javascript and I use a basic ListView with a Template to display data. What I wanna do is to class my divs differently whether an item is even or odd. Any clue about the best way to do that?

    Thanks!

    Sunday, September 23, 2012 8:11 AM

Answers

  • if you want to apply different attributes to the css you can do that as well:

    tr:nth-child(odd)    { background-color:#eee; }
    tr:nth-child(even) { background-color:#fff; }


    Jeff Sanders (MSFT)

    Tuesday, September 25, 2012 12:52 PM
    Moderator
  • Sure Christine,

    For example.  Create a default Grid View app from VS.

    Crank it up and go to the group details by clicking on the Group1 header.

    Use DOM explorer choose 'select element' and click on a ListView item on the right.

    Choose the 'Trace Styles' tab and you will see the background color of the .win-container gets it style from:

      .win-listview :not(.win-footprint).win-container

    Simply add this to your css (groupDetail.css):

      .win-listview :not(.win-footprint).win-container:nth-child(odd){
       background-color: aliceblue;
    }
    
        .win-listview :not(.win-footprint).win-container:nth-child(even){
        background-color: antiquewhite;
    }
    
    

    Make sense?  Can you follow the logic?

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, September 27, 2012 2:34 PM
    Moderator

All replies

  • if you want to apply different attributes to the css you can do that as well:

    tr:nth-child(odd)    { background-color:#eee; }
    tr:nth-child(even) { background-color:#fff; }


    Jeff Sanders (MSFT)

    Tuesday, September 25, 2012 12:52 PM
    Moderator
  • Hi Jeff.

    Could you elaborate on how the css attributes would work? See I want to have alternating backgrounds for a listview, but don't want to go to all the trouble of creating and swapping templates (as other articles and postings have shown). I just want to alternate background colors.

    thanks!

    Christine

    Wednesday, September 26, 2012 9:30 PM
  • Sure Christine,

    For example.  Create a default Grid View app from VS.

    Crank it up and go to the group details by clicking on the Group1 header.

    Use DOM explorer choose 'select element' and click on a ListView item on the right.

    Choose the 'Trace Styles' tab and you will see the background color of the .win-container gets it style from:

      .win-listview :not(.win-footprint).win-container

    Simply add this to your css (groupDetail.css):

      .win-listview :not(.win-footprint).win-container:nth-child(odd){
       background-color: aliceblue;
    }
    
        .win-listview :not(.win-footprint).win-container:nth-child(even){
        background-color: antiquewhite;
    }
    
    

    Make sense?  Can you follow the logic?

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, September 27, 2012 2:34 PM
    Moderator
  • Thanks Jeff!

    That makes perfect sense. didn't know you could do that.

    Christine

    Thursday, September 27, 2012 6:58 PM
  • Well Jeff.

    I thought it was clear, but when I put the above in my css it doesn't render different backgrounds.

    Also the margin setting don't seem to be working for me.

    Christine

    Saturday, September 29, 2012 8:06 AM