Thursday, March 13, 2008

Highlighting current ADF Table row by Javascript

Hi,

I played a little bit with adf table row highlighting this afternoon.
See demonstration.

I found maybe not better (in comparison to my previous post) but definitely easier solution based only on javascript.

Some notes:
- solution depends on structure of generated html table so if the structure is changed in next JDeveloper version (I used 10.1.3.1), the code will not work
- I don't think it will work without modification when there is a partial rendering used inside the table. I didn't test it.

Implementation into your page is easy:
  1. Add javascript code to your application (source is bellow)
  2. Add reference to the javascript into your page
  3. Add onload="onBodyLoad()" to body tag
  4. Edit javascript code and change firstRadioId variable value. It is "result id" of af:tableSelectOne element. If you don't know this result id, just set the element id to some value, run page and find it in html source code. Default value is 'table:0:rowSel' so you can also set table id to table, tableSelectOne id to rowSel, use af:form instead of h:form and then leave the firstRadioId value unchanged

Javascript source code (highlihgt.js):
var currentRowColor = '#ddddff';
var selectedRowColor = '#ffcccc';
var firstRadioId = 'table:0:rowSel';

var lastRow;
var lastBackgroundColors = new Array();
var lastSelRow;
var lastSelBackgroundColors = new Array();

function mouseOverRow(tableRow) {
var j = 0;
for (var i = 0; i < tableRow.childNodes.length; i++) {
lastBackgroundColors[j++] = tableRow.childNodes[i].style.backgroundColor;
tableRow.childNodes[i].style.backgroundColor = currentRowColor;
if (tableRow.childNodes[i].firstChild) {
if (tableRow.childNodes[i].firstChild.nodeName.toLowerCase() == 'input') {
lastBackgroundColors[j++] = tableRow.childNodes[i].firstChild.style.backgroundColor;
tableRow.childNodes[i].firstChild.style.backgroundColor = currentRowColor;
}
}
}
lastRow = tableRow;
}

function mouseOutOfRow(currentRow) {
if (lastRow) {
var j = 0;
for (var i = 0; i < lastRow.childNodes.length; i++) {
var bgcolor;
if (lastSelRow && currentRow == lastSelRow) {
bgcolor = selectedRowColor;
} else {
bgcolor = lastBackgroundColors[j++];
}
lastRow.childNodes[i].style.backgroundColor = bgcolor;
if (lastRow.childNodes[i].firstChild) {
if (lastRow.childNodes[i].firstChild.nodeName.toLowerCase() == 'input') {
if (lastSelRow && currentRow == lastSelRow) {
bgcolor = selectedRowColor;
} else {
bgcolor = lastBackgroundColors[j++];
}
lastRow.childNodes[i].firstChild.style.backgroundColor = bgcolor;
}
}
}
}
}

function highlightRow(selectedRow) {
if (lastSelRow && lastSelRow == selectedRow) {
return;
}

var j;
if (lastSelRow) {
j = 0;
for (var i = 0; i < lastSelRow.childNodes.length; i++) {
lastSelRow.childNodes[i].style.backgroundColor = lastSelBackgroundColors[j++];
if (lastSelRow.childNodes[i].firstChild) {
if (lastSelRow.childNodes[i].firstChild.nodeName.toLowerCase() == 'input') {
lastSelRow.childNodes[i].firstChild.style.backgroundColor = lastSelBackgroundColors[j++];
}
}
}
}

if (selectedRow.childNodes[0] && selectedRow.childNodes[0].firstChild) {
rowSelector = selectedRow.childNodes[0].firstChild;
rowSelector.checked = true;
}

j = 0;
for (var i = 0; i < selectedRow.childNodes.length; i++) {
lastSelBackgroundColors[j] = lastBackgroundColors[j];
j++;
selectedRow.childNodes[i].style.backgroundColor = selectedRowColor;
if (selectedRow.childNodes[i].firstChild) {
if (selectedRow.childNodes[i].firstChild.nodeName.toLowerCase() == 'input') {
lastSelBackgroundColors[j] = lastBackgroundColors[j];
j++;
selectedRow.childNodes[i].firstChild.style.backgroundColor = selectedRowColor;
}
}
}
lastSelRow = selectedRow;
}

function onBodyLoad() {
if (document.getElementById(firstRadioId)) {
var tableRow = document.getElementById(firstRadioId).parentNode.parentNode;
while (tableRow) {
tableRow.onmouseover = function() {mouseOverRow(this);}
tableRow.onmouseout = function() {mouseOutOfRow(this);}
tableRow.onclick = function() {highlightRow(this);}
tableRow = tableRow.nextSibling;
}
}
}
Update:
Today I found I have problem when the table contains page navigation. I will try to solve the problem soon.

Rado