set cell colors in function, but not in selected row

I need to set the cell background color in a function, as shown in the following simple example. (In my real app, the function is more complex).

But I don't want my function to change the color of cells in the selected row, I want those cells to use the normal highlight color. The following example works, but it needs to call refresh() whenever the selected row changes. This causes an ugly flicker if the table is large. Is there any way to do this without the refresh() ??

thanks

<script>
var tbl = new AW.UI.Grid;

tbl.setSelectionMode("single-row");
tbl.setVirtualMode(true);
tbl.setCellText(function(col, row){return row + "," + col;});
tbl.setHeaderText("header");
tbl.setColumnCount(6);
tbl.setRowCount(2000);

        // customize cell colors, except in selected row
tbl.getCellTemplate().setStyle("background", function(){
    var col = this.$0;
    var row = this.$1;
    var selrows = tbl.getSelectedRows();
    if (selrows && row == selrows[0])
        return "highlight";
    return (row+col) % 2 == 0 ? "white" : "red";});

// i need this else selected row is not highlighted (yuck)
tbl.onSelectedRowsChanged = function () {tbl.refresh();};

document.write(tbl);
</script>
 

bump

It would be easier to achieve this using CSS classes - you can play with priorities using !important attribute. And the default behavior is exactly what you need, the selector style overwrites the cell colors.

<style>

.aw-mycolors-type1 {background: white}
.aw-mycolors-type2 {background: red}

</style>
<script>

    var tbl = new AW.UI.Grid;

    tbl.setSelectionMode("single-row");
    tbl.setVirtualMode(true);
    tbl.setCellText(function(col, row){return row + "," + col;});
    tbl.setHeaderText("header");
    tbl.setColumnCount(6);
    tbl.setRowCount(2000);

    // customize cell colors
    tbl.getCellTemplate().setClass("mycolors", function(){
        var col = this.$0;
        var row = this.$1;
        return (row+col) % 2 == 0 ? "type1" : "type2";
    });

    document.write(tbl);

</script>

  Or more 'clean' example -

<style>

.aw-mycolors-type1 {background: white}
.aw-mycolors-type2 {background: red}

</style>
<script>

    var tbl = new AW.UI.Grid;

    tbl.setSelectionMode("single-row");
    tbl.setVirtualMode(true);
    tbl.setCellText(function(col, row){return row + "," + col;});
    tbl.setHeaderText("header");
    tbl.setColumnCount(6);
    tbl.setRowCount(2000);

    // add new cell property
    tbl.defineCellProperty("color", function(col, row){
        return (row+col) % 2 == 0 ? "type1" : "type2";
    });

    // customize cell template
    tbl.getCellTemplate().setClass("mycolors", function(){
        return this.getCellProperty("color");
    });

    document.write(tbl);

</script>

 

Thanks for the reply Alex.

CSS would work OK for the simple example I posted, but in my real app I'd rather use a function because each cell can have its own color, as determined by a color array generated on the server-side. To achieve this with CSS, I'd need to have a class for each possible cell color.

ok, then you just need this -

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

<style>

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

</style>
<script>

var tbl = new AW.UI.Grid;

tbl.setSelectionMode("single-row");
tbl.setVirtualMode(true);
tbl.setCellText(function(col, row){return row + "," + col;});
tbl.setHeaderText("header");
tbl.setColumnCount(6);
tbl.setRowCount(2000);

        // customize cell colors, except in selected row
tbl.getCellTemplate().setStyle("background", function(){
    var col = this.$0;
    var row = this.$1;
    return (row+col) % 2 == 0 ? "white" : "red";
});

document.write(tbl);

</script>

 

The style change does the trick, thanks Alex