controlling background color of sub cell value in dgrid

Question

I have a dgrid with 4 columns like below:

gridColumns: function() {
    return [{
            "field": "Column1",
            "label": Column1
        }, {
            "field": "Column2",
            "label": Column2
        }, {
            "field": "Column3",
            "label": Column3
        }, {
            "field": "Column4",
            "label": Column4,
            "sortable": false,
            "renderCell" : function(object, value, node) {
                if(value.length > 1){
                    for ( var i = 0; i < value.length; i++) {
                        domConstruct.create("div", {
                            "innerHTML" : value[i]
                        }, node);
                    }
                    return;
                }
                return document.createTextNode(value);
            }
        }];
},

As you can see, Column4 cell can have multiple values and thus I am overriding renderCell to loop through the values and output them into new lines inside the cell.

This works fine.

However, The background color of all 3 values is same as the background color of the row. So if the row is grey or white (depending on if its odd or even), the cell background is grey or white.

How can I do the same to these "sub-values" as well?

The behaviour I want is: if the background color of the row should be the background color of the first value, and alternate color in the 2nd value, again the first color in the third value and so on. I don't care if the last value background color is same as the color of the next row. I just want to alternate colors of the values.

How can I do that with above code ?

Answer 1

Add a CSS class (or style attribute) to the sub-cells you are creating:

domConstruct.create("div", {
    className: 'subCellClass',
    innerHTML : value[i]
}, node);