Styling on odd and even rows of a enyo.DataList

TimE

Is the an easy way of styling odd and even rows in a enyo.DataList, I was hoping there was something like the onSetupItem event that is available on the enyo.Repeater kind, but don't seem to be able to find one.

Tim.

psarin

I just use bindings from my model id to "classes". Maybe you can do something similar using the index instead?

bindings: [{from: ".model.orpodid", to: ".classes", transform: function(v){return "row" + (v%2);}}]

theryanjduffy

There are a couple approaches. @psarin's method will work. The binding might look like this:

{from: 'index', to: 'classes', transform: function (v) { return v % 2 ? 'even' : 'odd'; }}

Another option is to use CSS's :nth-child selector. This could be a bit unpredictable as the number of controls per page can vary and might be an odd value which would throw off the selector. If you chose this method, you'd probably need to statically define the number of controls per page to be an even number using the controlsPerPage member on the list. The selector would be something like:

.enyo-data-list .page :nth-child(even) {
    background: #ccc;
}

.enyo-data-list .page :nth-child(odd) {
    background: #999;
}

TimE

Thanks both, I went with the binding method, work great, thanks again.

rubenvreeken

If you don't need to support IE8, I would use the css selector. Support is for nth-child is pretty good (see: http://caniuse.com/#search=nth-child). If you run into issues with IOS8, you could try using nth-of-type selector instead (see: http://stackoverflow.com/questions/26032513/ios8-safari-after-a-pushstate-the-nth-child-selectors-not-works).

Since it's a styling issue, css would likely be the preferred approach. It's also less complicated than modifying the classes properties in case you need to add more than 1 class to your component. Finally, it is probably also slightly more performant than using a javascript binding (though to be fair, it is a micro-optimization).