Row Highlighting

In the following code, can anyone see a way to make the aw-rows-selected propery be dominant? Basically on my red rows, if I select one, I want it to turn blue like the rest. Do I need to change the way I define the row/cell colors? Thoughts? I thought the !important tag would do it, but it appears not.

<html>
<head>
<script src="/ActiveWidgets/runtime/lib/aw.js"></script> 
<link href="/ActiveWidgets/runtime/styles/aqua/aw.css" rel="stylesheet"></link> 
<style>
  #obj { width: 400px; height: 300px; }
  #obj .aw-grid-row {height: 20px; border-bottom: 1px solid #ccc;}
  #obj .aw-alternate-even {background: #fff;}
  #obj .aw-alternate-odd  {background: #eee;}
  #obj .aw-mouseover-row  {background: #c0c0c0;}
  #obj .aw-mousedown-row  {background: #999;}
  #obj .aw-rows-selected  {background: #316ac5!important; }
</style>
</head>
<body>
<script>
  var obj = new AW.UI.Grid;
  obj.setId('obj');
  obj.setHeaderText("header");
  obj.setCellText("cell");
  obj.setColumnCount(3);
  obj.setRowCount(12);
  obj.setSelectionMode("single-row");

  obj.defineCellProperty("bgcolor", function(col, row){
    if (row % 4 == 0) {
      return 'red';
    }
  });

  obj.defineCellProperty("color", function(col, row){
    if (row % 4 == 0) {
      return 'white';
    }
  });

  obj.getCellTemplate().setStyle("background-color", function(){
    return this.getControlProperty("bgcolor");
  });

  obj.getCellTemplate().setStyle("color", function(){
    return this.getControlProperty("color");
  });

  document.write(obj);
</script>
</body>
</html>

Mike

May 10,

You should make the background of the cells in the selected row transparent, otherwise the row background is not visible under the cells -

#obj .aw-rows-selected  .aw-grid-cell {background: none!important; }

Alex (ActiveWidgets)

May 10,

Perfect...now, one step further

obj.defineCellProperty("color", function(col, row){ 
    if (row % 4 == 0) { 
      return 'green'; 
    } 
  });

How do I get the text side to turn white on highlight despite what I may have defined here...

Mike

May 14,

Same thing (?)

#obj .aw-rows-selected  .aw-grid-cell {color: white!important; }

Alex (ActiveWidgets)

May 14,

Yeah, my appologies, I tried that but fat fingered the : after color and thus it didn't read in that property correctly.

Thanks again.

Mike

May 14,

This topic is archived.

Row Highlighting

See also:

Search

New Data Grid

Version 2