Conditional text formatting for database driven grids

[rajeevkushwaha]

Hello,

I am trying to apply conditional formatting to a column in subfile grid e.g. one of the columns has numeric values, I want to display all negative numbers in red color.

I am able to do this using bound variables when my grid is loaded programmatically however when using database driven grids I am not sure how to do this.

I could write CSS with different formats and use JavaScript to conditionally apply the appropriate class based on the field value, but not sure where to put such a JavaScript function.

Please advise

[Rob]

The Database bound grid does not have this capability. If you want to write some javascript, place it in /www/profoundui/htdocs/profoundui/userdata/custom/js folder and it will be automatically included in all pages

[mcorbo]

I know this is an old thread, but rather than including this in all pages, it is possible to include the javascript in just this one grid?

[Scott Klement]

In recent versions of Profound UI (much more recent than this thread) there is an "ondbload" event in the grid that runs whenever data is loaded from the database. That sounds like a good fit for the type of thing this thread was discussing... will that work for you?

[mcorbo]

Found it and it sounds like it might work, I'll try it.

[mcorbo]

Here is the js that I have in the ondbload event. Debugging indicates that the menuname is retrieved properly, just am not sure how to set that specific cell in the grid to color RED. what is the correct format of setProperty() to do this?

var myGrid = getObj("Grid1");
var rowCount = myGrid.grid.getRecordCount();
for (i = 1; i < rowCount; i++) {
var menuname = myGrid.grid.getCellValue(i, 0);
if (menuname == 'MENU1') {
myGrid.grid.setProperty(???????????, "color","RED");
}
}

[matt.denninghoff]

The grid's "setProperty" will set any valid grid property. You can see which properties are available in Visual Designer by clicking on the grid, and looking in the "Grid Properties" on the right side of the Designer screen. There is no property that sets a certain column or cell to display differently than others. So, you don't want to use "setProperty".

I don't see any API methods you could use to accomplish what you want. It looks like you'll need to use JavaScript to manipulate the grid's DOM elements in order to accomplish this. If you use the browser's Developer Tools to inspect the DOM, you can see that the grid cells are all child elements of one element, and each cell is output in sequence. So, if your grid is named "Grid1", there will be a <div> with id="Grid1". If it has 5 columns, then the first column's cells are located in .childNodes[0], .childNodes[5], 10, 15, etc. So you could iterate over the .childNodes to set the .style.color property to "red" when a cell is negative.

[mcorbo]

Thank you so much for that
I used the following javascript and it works fine, however, if you just mouseover any of the subfile rows it resets that rows color back to black, any ideas?

var myGrid = getObj("Grid1");
var rowCount = myGrid.grid.getRecordCount();
var table = document.getElementById("Grid1");
var children = table.children;
var l = children.length;

for (var i = 0; i < children.length; i++) {
var tableChild = children;
var text = tableChild.outerText;
var sub = text.substring(0,5);
if (text.substring(0,5) == "MENU1") {
tableChild.style.color = "red";
}
if (text.substring(0,5) == "MENU2") {
tableChild.style.color = "green";
}
if (text.substring(0,5) == "MENU3") {
tableChild.style.color = "blue";
}
if (text.substring(0,5) == "MENU4") {
tableChild.style.color = "purple";
}
}

[mcorbo]

I semi solved the issue by placing the same code in the onrowmouseover event, but if you move the mouse off the grid to the side, it stays black. so i added it to the onrowmouseout, then when it gains focus, once again black.

[matt.denninghoff]

This seems to work for me: change the .className of the cell by adding something, like "mynegative". Then, in a custom .css file, declare a CSS rule like:

Code: Select all

.crystal-grid .cell.mynegative {
 color: red;
}

However, I'm noticing the "ondbload" event only fires when the grid fetches data from the server. The grid will cache results to avoid fetching the same data repeatedly when you scroll. When it reads from the cache, then "ondbload" will not fire, so, the cells don't get displayed correctly.

You might also be able to set some code elsewhere, perhaps, onscroll, to compensate for when "ondbload" doesn't fire. But unfortunately, we're reaching the limitations of the database driven grid, which wasn't designed to handle anything fancier than displaying the raw data. The handler-driven grids, with stylized widgets in columns, might be what you need.