i have a for loop adding rows and cells. I want these cells to have only bottom border, thickness 1pt and black color. What is the best way to do this? the documentation is lacking examples
for (var r = 0; r < rowdata.length; r++) { //loop through data for each row
var newrow = table.insertTableRow(1+r)
//add cells and values
var cell1 = newrow.appendTableCell(rowdata[r][0])
var cell2 = newrow.appendTableCell(rowdata[r][1])
//align cell text to center
var cellStyle = {};
cellStyle[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.CENTER;
cell1.getChild(0).asParagraph().setAttributes(cellStyle)
cell2.getChild(0).asParagraph().setAttributes(cellStyle)
//set bottom border line width to 1pt, line color to black
//set the other borders line width to 0pt
???
}
I believe your goal is as follows.
When the rows are appended, you want to set the bottom border as 1 pt width and black color, and want to set the other borders as 0 pt width.
In the current stage, it seems that unfortunately, the Google Document service (DocumentApp) cannot manage each border. But, fortunately, when Docs API is used, your goal can be achieved. In this answer, I would like to propose achieving your goal using Docs API. When your script is modified it becomes as follows.
Modified script:
Before you use this script, please enable Google Docs API at Advanced Google services.
function myFunction() {
var doc = DocumentApp.getActiveDocument(); // Please set your Document.
var body = doc.getBody();
var table = body.getTables()[0]; // Please set your table.
var rowdata = [[,,,],[,,,],,,]; // Please set your values.
// --- This is your showing script.
for (var r = 0; r < rowdata.length; r++) {
var newrow = table.insertTableRow(1 + r);
var cell1 = newrow.appendTableCell(rowdata[r][0]);
var cell2 = newrow.appendTableCell(rowdata[r][1]);
var cellStyle = {};
cellStyle[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.CENTER;
cell1.getChild(0).asParagraph().setAttributes(cellStyle);
cell2.getChild(0).asParagraph().setAttributes(cellStyle);
}
// ---
doc.saveAndClose();
var docId = doc.getId();
var i = body.getChildIndex(table);
var index = Docs.Documents.get(docId).body.content[i + 1].startIndex;
var requests = [{ updateTableCellStyle: { tableCellStyle: { borderRight: { dashStyle: "SOLID", width: { magnitude: 0, unit: "PT" }, color: { color: {} } }, borderLeft: { dashStyle: "SOLID", width: { magnitude: 0, unit: "PT" }, color: { color: {} } } }, tableStartLocation: { index }, fields: "borderRight,borderLeft" } }];
Docs.Documents.batchUpdate({ requests }, doc.getId());
}
When this script is run, several rows are appended to the table on Document, and the width of vertical borders is changed to 0 pt. By this, only the bottom borders are shown.
References:
Method: documents.get
Method: documents.batchUpdate
UpdateTableCellStyleRequest
Added:
From your following reply,
that is what i am looking for with one difference. The table i am appending to already has some rows that i want to remain unchanged concerning their border style. I want to apply your code to the newly added rows only!
When you wanted to reflect the above request body to the appended rows, how about the following modification?
In your showing script, you are using var newrow = table.insertTableRow(1 + r);. In this case, the rows are put from the 2nd row. Using this script, how about the following sample script?
Sample script:
function myFunction() {
var doc = DocumentApp.getActiveDocument(); // Please set your Document.
var body = doc.getBody();
var table = body.getTables()[0]; // Please set your table.
var rowdata = [[,,,],[,,,],,,]; // Please set your values.
// --- This is your showing script.
for (var r = 0; r < rowdata.length; r++) {
var newrow = table.insertTableRow(1 + r);
var cell1 = newrow.appendTableCell(rowdata[r][0]);
var cell2 = newrow.appendTableCell(rowdata[r][1]);
var cellStyle = {};
cellStyle[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.CENTER;
cell1.getChild(0).asParagraph().setAttributes(cellStyle);
cell2.getChild(0).asParagraph().setAttributes(cellStyle);
}
// ---
doc.saveAndClose();
var docId = doc.getId();
var i = body.getChildIndex(table);
var index = Docs.Documents.get(docId).body.content[i + 1].startIndex;
// I modified this request body.
var requests = [{ updateTableCellStyle: { tableCellStyle: { borderRight: { dashStyle: "SOLID", width: { magnitude: 0, unit: "PT" }, color: { color: {} } }, borderLeft: { dashStyle: "SOLID", width: { magnitude: 0, unit: "PT" }, color: { color: {} } } }, tableRange: { tableCellLocation: { tableStartLocation: { index }, rowIndex: 1 }, rowSpan: rowdata.length, columnSpan: rowdata[0].length }, fields: "borderRight,borderLeft" } }];
Docs.Documents.batchUpdate({ requests }, doc.getId());
}
When this script is run, the vertical lines are removed from the appended rows from the 2nd row.
Related
Completely new to JS and jQuery here. The code iterates through each one of the bars and when you press the Reset button, it should shrink the bars down to zero. However, I am trying to get this bar graph animation to stop but once you press the button, it goes through the animation and resets back again to where it was before. Any help would be appreciated!
function barGraph(data) {
//Create graph
var graph = document.createElement("div");
graph.id = "barGraph";
//inserting bar graph before previous 'label' div
const target = document.querySelector('#labels');
target.parentNode.insertBefore(graph, labels);
//Styling for graph
graph.style.position = "relative";
graph.style.marginTop = "20px";
graph.style.height = "500px";
graph.style.backgroundColor = "Gainsboro";
graph.style.borderBottomStyle = "solid";
graph.style.borderBottomWidth = "1px";
graph.style.overflow = "hidden";
//Iterating through each bar
var position = 50;
var width = 75;
for (i = 0; i < data.length; i += 1) {
var spendData = data[i];
var bar = document.createElement("div");
//set a unique id for each of the bars
bar.id = data[i].category;
//Styling for bar
bar.style.position = "absolute";
bar.style.left = position + "px";
bar.style.width = width + "px";
bar.style.backgroundColor = spendData.color;
bar.style.height = (spendData.amount) / 5 + "px";
bar.style.bottom = "0px";
bar.innerHTML = "$" + spendData.amount;
bar.style.fontSize = "11px";
bar.style.color = "Azure";
bar.style.fontWeight = "800";
bar.style.fontFamily = "Arial, Helvetica, sans-serif";
bar.style.textAlign = "center";
bar.style.padding = "1em";
//Appending to the graph
graph.appendChild(bar);
//Set bar width
position += (width * 2);
}
return graph;
}
window.onload = function() {
var data = [{
category: "Food and Dining",
amount: "2005.00",
color: "CadetBlue"
},
{
category: "Auto and Transport",
amount: "1471.31",
color: "CornflowerBlue"
},
{
category: "Shopping",
amount: "892.86",
color: "DarkCyan"
},
{
category: "Bills and Utilities",
amount: "531.60",
color: "DarkSeaGreen"
},
{
category: "Mortgage",
amount: "1646.00",
color: "LightSeaGreen"
},
{
category: "Entertainment",
amount: "179.52",
color: "YellowGreen"
}
];
document.getElementById("resetGraph").addEventListener("click", function() {
for (i = 0; i < data.length; i++) {
var bar = document.getElementById(data[i].category);
if (bar) {
bar.animate({
"height": "0px",
"padding": "0px"
}, 2000);
}
}
});
var graph = barGraph(data);
//document.div.appendChild(graph);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="labels"></div>
<button id="resetGraph">Reset graph</button>
<script src="js/spending-graph.js"></script>
Dom's animate() function will return an AnimationPlaybackEvent object. And we can use onFinish method to reset the height and width of the dom element or can hide it.
Can you please add following lines to your code after bar.animate() function.
.onfinish=function(e){
e.currentTarget.effect.target.style.visibility ="hidden"
};
like below snippet.
bar.animate({
"height": "0px",
"padding": "0px"
}, 2000).onfinish=function(e){
e.currentTarget.effect.target.style.visibility ="hidden"
};
Updated
Interesting question! AFAICT the problem is that you've mixed up jQuery's .animate() with the native Javascript .animate().
Your question is tagged jQuery-animate, you mention it explicitly, and the format of the parameter you are passing to .animate() is exactly what jQuery expects.
But your animate code is running against an HTML DOM element, not a jQuery element:
// bar here is an HTML DOM Element, not a jQuery object:
var bar = document.getElementById(data[i].category);
// That means this will run JS .animate, not jQuery's:
bar.animate( ... );
If you simply change that to run against a jQuery object, it works (almost) as expected:
var bar = $('#' + data[i].category);
bar.animate( ... );
I say almost because there is another problem:
bar.id = data[i].category;
This creates HTML IDs from your plain English categories, which include whitespace, like "Food and Dining". According to the spec:
id's value must not contain whitespace (spaces, tabs etc.).
And at least when trying to use IDs with spaces as jQuery selectors, this matters, and it does not work. So instead let's just use the array index, which is also guaranteed to be unique, with a prefix so we know what we're referring to:
bar.id = 'bar-' + i;
Here's a working snippet with those 2 changes.
Note: the last document.div.appendChild(graph); was throwing an error - maybe this was a debugging attempt, it isn't necessary and I've commented it out here.
function barGraph(data) {
//Create graph
var graph = document.createElement("div");
graph.id = "barGraph";
//inserting bar graph before previous 'label' div
const target = document.querySelector('#labels');
target.parentNode.insertBefore(graph, labels);
//Styling for graph
graph.style.position = "relative";
graph.style.marginTop = "20px";
graph.style.height = "500px";
graph.style.backgroundColor = "Gainsboro";
graph.style.borderBottomStyle = "solid";
graph.style.borderBottomWidth = "1px";
graph.style.overflow = "hidden";
//Iterating through each bar
var position = 50;
var width = 75;
for (i = 0; i < data.length; i += 1) {
var spendData = data[i];
var bar = document.createElement("div");
//set a unique id for each of the bars
// UPDATED - category includes spaces, just use array index
// bar.id = data[i].category;
bar.id = 'bar-' + i;
//Styling for bar
bar.style.position = "absolute";
bar.style.left = position + "px";
bar.style.width = width + "px";
bar.style.backgroundColor = spendData.color;
bar.style.height = (spendData.amount) / 5 + "px";
bar.style.bottom = "0px";
bar.innerHTML = "$" + spendData.amount;
bar.style.fontSize = "11px";
bar.style.color = "Azure";
bar.style.fontWeight = "800";
bar.style.fontFamily = "Arial, Helvetica, sans-serif";
bar.style.textAlign = "center";
bar.style.padding = "1em";
//Appending to the graph
graph.appendChild(bar);
//Set bar width
position += (width * 2);
}
return graph;
}
window.onload = function() {
var data = [{
category: "Food and Dining",
amount: "2005.00",
color: "CadetBlue"
},
{
category: "Auto and Transport",
amount: "1471.31",
color: "CornflowerBlue"
},
{
category: "Shopping",
amount: "892.86",
color: "DarkCyan"
},
{
category: "Bills and Utilities",
amount: "531.60",
color: "DarkSeaGreen"
},
{
category: "Mortgage",
amount: "1646.00",
color: "LightSeaGreen"
},
{
category: "Entertainment",
amount: "179.52",
color: "YellowGreen"
}
];
document.getElementById("resetGraph").addEventListener("click", function() {
for (i = 0; i < data.length; i++) {
// UPDATED: 1. use new format ID without spaces
// UPDATED: 2. use jQuery selector/animation
// UPDATED: 3. use bar.length to test if selector matched anything
var bar = $('#bar-' + i);
if (bar.length) {
bar.animate({
"height": "0px",
"padding": "0px"
}, 2000);
}
}
});
var graph = barGraph(data);
//document.div.appendChild(graph);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="labels"></div>
<button id="resetGraph">Reset graph</button>
So what is happening in your original code? I am not sure. It is the native Javascript .animate() that is running, not jQuery's. The first parameter of the Javascipt .animate() method should be:
Either an array of keyframe objects, or a keyframe object whose properties are arrays of values to iterate over.
Your code is passing an object, not an array, so .animate() will expect the latter, "a keyframe object". The Keyframe Formats spec gives a little more detail and some examples for what "a keyframe object" looks like:
element.animate({
opacity: [ 0, 1 ], // [ from, to ]
color: [ "#fff", "#000" ] // [ from, to ]
}, 2000);
Your object does not match this format though - each attribute is just a string, not an array of start/stop values. The Keyframe docs also describe Implicit to/from keyframes:
In newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer the other end of the animation if it is able to.
My guess is this is what is happening, somehow? The browser is inferring an implicit end frame of the start values?
I tried to update your code to use the right Keyframe format, so you can use the native .animate() and skip jQuery all together, but it does not work - the bars reset to their original height after the animation, just like in your original code, I don't know why:
document.getElementById("resetGraph").addEventListener("click", function() {
var bar, startHeight;
for (i = 0; i < data.length; i++) {
bar = document.getElementById('bar-' + i);
if (bar) {
startHeight = window.getComputedStyle(bar).height;
bar.animate({
height: [startHeight, '0px'],
padding: ['1em', '0']
}, 2000);
}
}
});
im using a handsontable https://handsontable.com/ on a webpage.
var hot = new Handsontable(container, {
data: datatable,
colHeaders: true,
rowHeaders: true,
width: 600,
licenseKey: "non-commercial-and-evaluation",
});
Now I want to dynalically highlight some cells by changing it's background color. Like this:
var dataElements = document.querySelectorAll('.handsontable td');
if (row_attr == "ALL") {
for (var k = row * numberOfCols; k < (row + 1) * numberOfCols; k++) {
dataElements[k].style.backgroundColor = color;
}
}
Thia works fine but if a scroll further down on the page and go back up to that cell it is not colored anymore.
Is anyone familliar with the handsontable.js ?
I guess the table dynamically renders the part of the table that is displayed but I'm not sure.
Coming again with another question :)
This time I had a requirement to show some progress while Child rows are being loaded. Since there is an Api call which relatively takes little time to return data, I do want to show the some progress unless the user who clicks the parent row is totally unaware whether there is a call done to see its child rows.
What I have done:
I wrote a style sheet class which has a
loader-small.gif
image as this:
tr.loading td.details-control {
background: url('/Images/loader-small.gif') no-repeat center center;
}
and applied like this:
$('#accountManagerEarningsDataTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
try {
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
//Calling the loading Class ------>
tr.addClass('loading');
// Open this row
var arrForTable1 = [];
var arrForTable2 = [];
totalBrokerage = 0;
totalRetailBrokerage = 0;
totalSelfServiceBrokerage = 0;
console.log('You selected: ' + row.data().AccountManagerID);
var settings = {
"columnDefs": [
{ targets: 1, align: "right", decimals: 0 },
{ targets: 2, align: "right", decimals: 0 },
{ targets: 3, align: "right", decimals: 0 },
{ targets: 4, align: "right", decimals: 2 },
{ targets: 5, align: "right", decimals: 2 }
]
};
//problems with asynchoronus call back
var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);
if (response.success === "true") {
for (var i = 0; i < response.value.length; i++) {
for (var j = 0; j < response.value[i].Securities.length; j++) {
var itemRow2 = {};
itemRow2["Security ID"] = response.value[i].Securities[j].SecurityId;
itemRow2["Trades"] = response.value[i].Securities[j].Trades;
itemRow2["Buy Qty"] = response.value[i].Securities[j].BuyQuantity;
itemRow2["Sell Qty"] = response.value[i].Securities[j].SellQuantity;
itemRow2["Total Brkg"] = response.value[i].Securities[j].Effective_Brokerage;
itemRow2["Online Brkg"] = response.value[i].Securities[j].Online_Brokerage;
arrForTable2.push(itemRow2);
totalBrokerage = totalBrokerage + parseFloat(response.value[i].Securities[j].Effective_Brokerage);
totalSelfServiceBrokerage = totalSelfServiceBrokerage + parseFloat(response.value[i].Securities[j].Online_Brokerage);
}
totalBrokerage = Math.round(totalBrokerage * 100) / 100;
totalSelfServiceBrokerage = Math.round(totalSelfServiceBrokerage * 100) / 100;
totalRetailBrokerage = Math.round(totalRetailBrokerage * 100) / 100;
var itemRow1 = {};
itemRow1["Account ID"] = response.value[i].AccountId;
itemRow1["Account Name"] = response.value[i].AccountName;
itemRow1["..."] = '<div class="alert alert-info" role="alert">' + buildHtmlTable(arrForTable2, 'table2x' + j, settings) + '<p>Total Brokerage ' + numberWithCommas(totalBrokerage) + '</p></div>';
arrForTable1.push(itemRow1);
arrForTable2 = [];
totalBrokerage = 0;
totalRetailBrokerage = 0;
totalSelfServiceBrokerage = 0;
}
tr.removeClass('loading');
htmlTable1 = buildHtmlTable(arrForTable1, 'table1x' + i);
row.child(htmlTable1).show();
tr.addClass('shown');
}
else {
row.child('<table><tr><td>' + response.value[0].AccountId + '</td></tr></table>').show();
tr.addClass('shown');
};
}
} catch (e) {
console.log(e.message);
}
});
The Problem:
Firefox nicely shows the Progress image after the user clicks it, but Edge and Chrome does not show. Both browsers crossed this piece of code when I was debugging from developer tools of the respective browser.
Its browser compatible problem? Is there a solution for it? Help me please.
In case of chrome there is such an issue while showing the loading bar while making a server call. Please make the following changes where you are making the service call. First add the class loading to the table
tr.addClass('loading');
After that make the service call by giving a timeout function
setTimeout(function(){
var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);
......
//Your service calls and response call backs
},1);
On providing a timeout (say 1ms), Chrome will get the time to bind the loading bar to DOM, In other case the DOM Object is not available to show the spinner.
I'm populating a TabContainer with grids (Dojo 1.8, dgrid) that are showing the results of a query for different datasets. Each tab is the result of a single dataset. The different datasets will have a varying number of fields, so I'm dynamically building each grid and adding it to a ContentPane, which gets added to the TabContainer.
My current problem is seting the width of the grids when they are built. The datasets could have from two fields to upwards of 100 fields to be shown in the grid. I've set a default width in CSS for the grid of 600px, but the grid will only show the first six fields of the dataset. If I set the width to "auto", it is only as wide as the TabContainer, removing the scroll bar and cutting off the data. Is it possible to set a width for each grid separately?
This is what the result looks like
This is the code for populating the TabContainer
function buildColumns(feature) {
var attributes = feature.attributes;
var columns = [];
for (attribute in attributes) {
if (attribute != "Shape") {
var objects = {};
objects.label = attribute;
objects.field = attribute;
columns.push(objects);
}
}
return columns;
}
function populateTC(results, evt) {
try {
if (dijit.byId('tabs').hasChildren) {
dijit.byId('tabs').destroyDescendants();
}
if (results.length == 0) {
console.log('Nothing found.');
return;
}
var combineResults = {};
for (var i = 0, len = results.length; i < len; i++) {
var result = results[i];
var feature = result.feature;
var lyrName = result.layerName.replace(' ', '');
if (combineResults.hasOwnProperty(lyrName)) {
combineResults[lyrName].push(result);
}
else {
combineResults[lyrName] = [result];
}
}
for (result in combineResults) {
var columns = buildColumns(combineResults[result][0].feature);
var features = [];
for (i = 0, len = combineResults[result].length; i < len; i++) {
features.push(combineResults[result][i].feature);
}
var data = array.map(features, function (feature) {
return lang.clone(feature.attributes);
});
var dataGrid = new (declare([Grid, Selection]))({
id: "dgrid_" + combineResults[result][0].layerId,
bufferRows: Infinity,
columns: columns,
"class": "resultsGrid"
});
dataGrid.renderArray(data);
dataGrid.resize();
dataGrid.on(".dgrid-row:click", gridSelect);
var cp = new ContentPane({
id: result,
content: "<b>" + combineResults[result][0].layerName + "\b",
//content: dataGrid,
title: combineResults[result][0].layerId
}).placeAt(dijit.byId('tabs'));
cp.addChild(dataGrid);
cp.startup();
cp.resize();
}
tc.startup();
tc.resize();
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
}
catch (e) { console.log(e.message); }
}
The problem is not with the grid width, it's the column widths. They fit the container.
If you give a column a fixed width, you will get the desired effect.
You should be able to style .dgrid-cell or .dgrid-column-[index]
I've also had a need for more control depending on the column data. You can control the style by providing a column with its own renderHeaderCell and renderCell method as well. (style refers to dom-style)
renderHeaderCell: function(node) {
style.set(node, 'width', '50px');
}
renderCell: function(object, value, node) {
style.set(node, 'width', '50px');
}
I was able to use the AddCssRule to dynamically change the size of the grids
var dataGrid = new (declare([Grid, Selection]))({
id: "dgrid_" + combineResults[result][0].layerId,
bufferRows: Infinity,
columns: columns,
"class": "resultsGrid"
});
dataGrid.renderArray(data);
var gridWidth = "width: " + String(columns.length * 100) + "px";
dataGrid.addCssRule("#" + dataGrid.id, gridWidth);
dataGrid.resize();
dataGrid.refresh();
Here is a Fiddle that shows the result. Click on a colored polygon to show the different grids (although the content is sometimes being shoved into the header of the grid). Also, the tabs aren't being rendered correctly, but there should be 0, 224, and 227 (if you also clicked on a point).
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).
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
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 });