I'm having trouble in correctly setting the background color of a row in a grid using sclass attribute. I need to change the background when a specific column value is changed from null to something or if, when the grid is created, this column has still a value different from null. So I don't need to change all the lines background, but only few of them.
This is the style I wrote:
<style>
.returned .z-row-cnt, .returned td.z-row-inner
{
background: none repeat scroll 0% 0% #D0C791;
}
.returned tr.z-row td.z-row-inner, .returned tr.z-row .z-cell {
background: none repeat scroll 0% 0% #D0C791;
}
.returned .z-row {
background-color: #D0C791;
}
.returned .z-label, .returned .z-button .z-button-cm {
color: #EFE9CE;
}
</style>
and this is the grid:
<grid span="true" model="@bind(vm.exitRequests)"
emptyMessage="Nessun mezzo/Nessuna richiesta trovati" height="100%" width="100%">
<columns sclass="myColumn">
<column width="18%;" label="Tipo Mezzo" />
<column width="18%;" label="Nome - Targa" />
<column width="18%;" label="Data Richiesta Uscita" />
<column sclass="myColumn" width="18%;" label="Data Richiesta Rientro"
sortDescending="@bind(vm.openRequestComparatorDesc)"
sortAscending="@bind(vm.openRequestComparatorAsc)" sortDirection="ascending"/>
<column width="10%;" />
<column width="8%;" />
<column width="9%;" />
</columns>
<rows>
<template name="model" var="request">
<row sclass="@load(vm.getMySclass(request))">
...
The view model method:
public String getMySclass(OpenRequest request){
if (request.getActivity() != null && request.getActivity().getCloseTime() != null) {
return "returned";
} else return "working";
}
With this style it only change the inner part of the cell, but the global
tr.z-row td.z-row-inner
win on my
.returned tr.z-row td.z-row-inner
that has no effect.
You're on the right track by putting the
sclass
on therow
, and using CSS selectors to specify the style of the 'inner' component.I believe the CSS selector you're looking for will be:
This selects all table row (
tr
) tags with both thez-row
and thereturned
style class. The CSS selector your proposed at the end of your post was, instead, selecting all table row tags with thez-row
style class which are descendants of something with thereturned
style class.You can read more about this (useful) nuance of CSS selectors here:
http://css-tricks.com/multiple-class-id-selectors/