zk use of sclass in row grid

Question

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.

Answer 1

You're on the right track by putting the sclass on the row, and using CSS selectors to specify the style of the 'inner' component.

I believe the CSS selector you're looking for will be:

tr.z-row.returned td.z-row-inner

This selects all table row (tr) tags with both the z-row and the returned style class. The CSS selector your proposed at the end of your post was, instead, selecting all table row tags with the z-row style class which are descendants of something with the returned style class.

You can read more about this (useful) nuance of CSS selectors here:
http://css-tricks.com/multiple-class-id-selectors/