3.2.0

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>

CK
April 7,
bump
CK
April 11,
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>
Alex (ActiveWidgets)
April 11,
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.
CK
April 11,
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>
Alex (ActiveWidgets)
April 11,
The style change does the trick, thanks Alex
CK
April 11,

This topic is archived.

See also:


Back to support forum