Table decoration in Qooxdoo

Question

Is it possible to set the background color of one Row in a Table? I need to highlight a row when a condition applies. Something to the effect of < tr font="...">...< /tr> where I can specify the "font" attributes. (I need the whole row to be highlighted).

Answer 1

you have to subclass the qooxdoo default row renderer to make that happen. Take a look at the following code which you can test in the qooxdoo playground. It shows you how to do it.

    function createRandomRows(rowCount) {
  var rowData = [];
  var now = new Date().getTime();
  var nextId = 0;
  for (var row = 0; row < rowCount; row++) {
    rowData.push([ nextId++, Math.random() * 10000]);
  }
  return rowData;
}


// window
var win = new qx.ui.window.Window("Table").set({
  layout : new qx.ui.layout.Grow(),
  contentPadding: 0
});
this.getRoot().add(win);
win.open();

// table model
var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns([ "ID", "A number" ]);
tableModel.setData(createRandomRows(10000));

// table
var table = new qx.ui.table.Table(tableModel).set({decorator: null})




/**
 * New row renderer!
 */
qx.Class.define("condRow", {
  extend : qx.ui.table.rowrenderer.Default,
  members : {

    // overridden
    updateDataRowElement : function(rowInfo, rowElem)
    {
      this.base(arguments, rowInfo, rowElem);
      var style = rowElem.style;

      if (!(rowInfo.focusedRow && this.getHighlightFocusRow()) && !rowInfo.selected) {
        style.backgroundColor = (rowInfo.rowData[1] > 5000) ? this.__colors.bgcolEven : this.__colors.bgcolOdd;
      }
    },

    // overridden
    createRowStyle : function(rowInfo)
    {
      var rowStyle = [];
      rowStyle.push(";");
      rowStyle.push(this.__fontStyleString);
      rowStyle.push("background-color:");

      if (rowInfo.focusedRow && this.getHighlightFocusRow())
      {
        rowStyle.push(rowInfo.selected ? this.__colors.bgcolFocusedSelected : this.__colors.bgcolFocused);
      }
      else
      {
        if (rowInfo.selected)
        {
          rowStyle.push(this.__colors.bgcolSelected);
        }
        else
        {
          // here is the second magic
          rowStyle.push((rowInfo.rowData[1] > 5000) ? this.__colors.bgcolEven : this.__colors.bgcolOdd);
        }
      }

      rowStyle.push(';color:');
      rowStyle.push(rowInfo.selected ? this.__colors.colSelected : this.__colors.colNormal);

      rowStyle.push(';border-bottom: 1px solid ', this.__colors.horLine);

      return rowStyle.join("");
    },    
  }
});

table.setDataRowRenderer(new condRow(table));
win.add(table);

At the bottom of the code you see the new row renderer which marks all rows having a bigger number than 5000 in the second column.

​Regards, Martin

Answer 2

Here's a version of Martin Wittemann's answer that works in the playground (1.6 tested):

/** This renderer makes rows matching our conditions appear as different colours */
qx.Class.define("CustomRowRenderer", {

  extend : qx.ui.table.rowrenderer.Default,
  members : {

        /** Overridden to handle our custom logic for row colouring */
        updateDataRowElement : function(rowInfo, rowElem) {

            // Call super first
            this.base(arguments, rowInfo, rowElem);

            // Get the current style
            var style = rowElem.style;

            // Don't overwrite the style on the focused / selected row
            if (!(rowInfo.focusedRow && this.getHighlightFocusRow()) && !rowInfo.selected) {

                // Apply our rule for row colouring
                style.backgroundColor = (rowInfo.rowData[1] > 5000) ? this._colors.bgcolEven : this._colors.bgcolOdd;

            }

        },

        /** Overridden to handle our custom logic for row colouring */
        createRowStyle : function(rowInfo) {

            // Create some style
            var rowStyle = [];
            rowStyle.push(";");
            rowStyle.push(this.__fontStyleString);
            rowStyle.push("background-color:");

            // Are we focused? 
            if (rowInfo.focusedRow && this.getHighlightFocusRow()) {

                // Handle the focused / selected row as normal
                rowStyle.push(rowInfo.selected ? this._colors.bgcolFocusedSelected : this._colors.bgcolFocused);

            } else {

                // Aew we selected?
                if (rowInfo.selected) {

                    // Handle the selected row as normal
                    rowStyle.push(this._colors.bgcolSelected);

                } else {

                    // Apply our rule for row colouring
                    rowStyle.push((rowInfo.rowData[1] > 5000) ? this._colors.bgcolEven : this._colors.bgcolOdd);

                }

            }

            // Finish off the style string
            rowStyle.push(';color:');
            rowStyle.push(rowInfo.selected ? this._colors.colSelected : this._colors.colNormal);
            rowStyle.push(';border-bottom: 1px solid ', this._colors.horLine);
            return rowStyle.join("");

        }

    }

});

// Demo table
var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns([ "ID", "Number" ]);
tableModel.setData([
  [1, 5000],
  [1, 6000],
  [1, 6000],
  [1, 6000],
  [1, 6000],
  [1, 4000],
  [1, 4000],
  [1, 4000],
  [1, 6000]
]);
var table = new qx.ui.table.Table(tableModel);

// Apply our renderer
table.setDataRowRenderer(new CustomRowRenderer(table));

// Add table
this.getRoot().add(table, { left : 10, top  : 10 });