Coloring a cell/row and setCurrentRow
I have the following code to color a row based on the value for the second column:
// add new cell properties for foreground/background colors
obj.defineCellProperty("background-color", function(column, row){
var text = this.getCellText(column, row);
var cellColor;
if (text < 200) {
cellColor = "white";
}
if (text > 450) {
cellColor = "red";
}
if (text >= 200){
if (text <=450){
cellColor = "yellow";
}
}
obj.getRowTemplate(row).setStyle("background-color", cellColor); // this should work
return cellColor;
});
// assign background-color property to column-1 background
obj.getCellTemplate(2).setStyle("background-color", function(){
return this.getControlProperty("background-color");
});
It has a bug that you do not see the whole row get colored until some action is taken on the display (move the scrollbar, or sort a column).
I added in a find function using the following code:
// start searching at next position and cycle at end
function find(startIndex){
var col = document.getElementById("findSelect").value;
var findString = document.getElementById("findText").value;
var max = obj.getRowProperty("count");
pos=nextPos(startIndex);
var found = -1;
for (i=pos-1; i<max; i++){
var cellStr = obj.getCellValue(col,i); // get the string in the cell
if (cellStr.indexOf(findString) >= 0){
obj.getRowTemplate(i).setStyle("background-color","lightblue");
obj.setCurrentRow(i);
obj.refresh();
return;
}
}
if (found == -1){
var cellNbr = parseInt(col)+1;
alert('Value not found in column '+ cellNbr);
}
else {
obj.refresh();
}
}
// returns next position and cycle at end.
function nextPos(index){
var max = obj.getRowProperty("count");
if (index<0 || index>=(max - 1)){
return 0;
}
return index + 1;
}
This works but the problem is that if the find causes the grid to be scrolled to make the item visible the the cell property is invoked and the line is changed from lightblue back to the color based on the cell property. Does anyone have a good idea how I can fix this?
// add new cell properties for foreground/background colors
obj.defineCellProperty("background-color", function(column, row){
var text = this.getCellText(column, row);
var cellColor;
if (text < 200) {
cellColor = "white";
}
if (text > 450) {
cellColor = "red";
}
if (text >= 200){
if (text <=450){
cellColor = "yellow";
}
}
obj.getRowTemplate(row).setStyle("background-color", cellColor); // this should work
return cellColor;
});
// assign background-color property to column-1 background
obj.getCellTemplate(2).setStyle("background-color", function(){
return this.getControlProperty("background-color");
});
It has a bug that you do not see the whole row get colored until some action is taken on the display (move the scrollbar, or sort a column).
I added in a find function using the following code:
// start searching at next position and cycle at end
function find(startIndex){
var col = document.getElementById("findSelect").value;
var findString = document.getElementById("findText").value;
var max = obj.getRowProperty("count");
pos=nextPos(startIndex);
var found = -1;
for (i=pos-1; i<max; i++){
var cellStr = obj.getCellValue(col,i); // get the string in the cell
if (cellStr.indexOf(findString) >= 0){
obj.getRowTemplate(i).setStyle("background-color","lightblue");
obj.setCurrentRow(i);
obj.refresh();
return;
}
}
if (found == -1){
var cellNbr = parseInt(col)+1;
alert('Value not found in column '+ cellNbr);
}
else {
obj.refresh();
}
}
// returns next position and cycle at end.
function nextPos(index){
var max = obj.getRowProperty("count");
if (index<0 || index>=(max - 1)){
return 0;
}
return index + 1;
}
This works but the problem is that if the find causes the grid to be scrolled to make the item visible the the cell property is invoked and the line is changed from lightblue back to the color based on the cell property. Does anyone have a good idea how I can fix this?
ShepherdOwner
January 19,