Table decoration at Qooxdoo

Question

Can I set the background color of one row in a table? I need to select a line when the condition is met. Something like < tr font="...">...< /tr> where I can specify the attributes of "font". (I need the whole line to be highlighted).

Answer 1

you need to subclass qooxdoo default line renderer for this to happen. Take a look at the following code, which you can check on the qooxdoo playground. He 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 a new row rendering that marks all rows having a larger number than 5000 in the second column.

Regards, Martin

Answer 2

Here is the version of Martin Witteman's answer that works on the playground (1.6):

 /** 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 });