Focal Point
[CLOSED] Maintain HTML Table row highlight ?

This topic can be found at:
http://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/992105694

July 27, 2010, 01:24 PM
Dave Ayers
[CLOSED] Maintain HTML Table row highlight ?
I would like to be able to highlight the selected row in a Maintain HTML Table, but I can't seem to find a way to do so.

Does anyone know of a syntax to address a specific table row, or its forecolor and backcolor properties ?

I would prefer to do this within Maintain, but a JavaScript approach is OK if necessary.

Thanks,

This message has been edited. Last edited by: Kerry,


Regards,
Dave

http://www.daveayers.com

WebFocus/Maintain 7.6.4-8
on Win2000 and 2003 Server
July 27, 2010, 02:34 PM
Maintain Wizard
My technique cheats a little. I resets the entire table to white and then changes the selected row to aqua.

Mark

function OnHTMLTable1_ClickLink ( ) {
var selrow =document.Form1.HTMLTable1_ClickRow.value;
var k = selrow -1;
var TableObj;
var TableDiv = document.getElementById("HTMLTable1");
var DivChildren = TableDiv.children;
for (i=0; iif (DivChildren(i).tagName == "TABLE")
{
TableObj = DivChildren(i);
break;
}
for (i=0; ifor (j=0; j{
TableObj.rows(i).style.backgroundColor = "white";
}
}
}
for (i=0; ifor (j=0; jif(k == i)
{
TableObj.rows(i).style.backgroundColor = "aqua";
}
if(k != i)
{
TableObj.rows(i).style.backgroundColor = "white";
}
}
}
Form1.EditBox1.focus();
}
July 27, 2010, 06:05 PM
Dave Ayers
Thanks, Mark, I got the highlighting to work with this code:

function OnSearchTable_ClickLink ( )  {
var selrow =document.FindEdit.SearchTable_ClickRow.value;
var k = selrow -1;
var TableDiv = document.getElementById("SearchTable");
var DivChildren = TableDiv.children;
var TableObj;

for (i=0; i<DivChildren.length; i++)
if (DivChildren(i).tagName == "TABLE") {
	TableObj = DivChildren(i);
	break;
}
for (i=0; i<TableObj.rows.length; i++) {
	for (j=0; j<TableObj.rows(i).cells.length; j++) {
		if(k == i){
			TableObj.rows(i).style.backgroundColor = "rgb(248, 225, 150)";
			TableObj.rows(i).style.fontWeight = "bold";
			}
	}
}


BUT ! I now realize that just doing this in client side JavaScript is not enough.

I need to have maintain respond to the HTMLTable selection by populating a number of form controls, and sending back a new page to the users browser, with the selected row highlighted.

What I just accomplished was only to Highlight a row on in the browser page. Now I'm faced with the problem of how to do this again when the page is refreshed by Maintain with the field values, on a whole new page !

There will be no ClickLink event on the 2nd pageload to trigger the row highlight. I know I can pass a variable with the selected row number, and perhaps a 'selected' state var., but not sure what to do with it from there. I've never been a big fan of trying to add stuff into the Maintain (7.6.8 btw) onLoad code.

Any ideas ?

The overall idea I am working on is to present a single page that has a record search capability, and all the records data fields, to be able to add a new record, update, or delete an existing one (selected from the Search Table). The selected row highlighting is a necessary user interface function.

One-stop shopping for all db functions for a small record Smiler

This message has been edited. Last edited by: Dave Ayers,


Regards,
Dave

http://www.daveayers.com

WebFocus/Maintain 7.6.4-8
on Win2000 and 2003 Server
July 28, 2010, 10:12 AM
Maintain Wizard
In order to make the row highlighed when the form refreshes, you have to add two steps.

1) Save the selected row number in an field on your form
2) Perform the highlighting code when the form refreshes.

Saving the value is no problem. When a selection is made, just do:
var form.obj.value =document.FindEdit.SearchTable_ClickRow.value;

Where form is the name of your form and obj is the name of the variable containing the selected value. Remember to preset this value to 1 and you can make it visible No.

Next you need to create a JavaScript procedure containing your highlighting code AND a small wrapper. Once you create this, add it to your project and embed it onto your form.

var OriginalOnload = document.body.onload;
document.body.onload = LoadFunct; //assign your custom onload

function LoadFunct() {
if (OriginalOnload) OriginalOnload (); //first run the OriginalOnload
// Custom onload code can now follow

var selrow =form.obj.value;
var k = selrow -1;
var TableDiv = document.getElementById("SearchTable");
var DivChildren = TableDiv.children;
var TableObj;
-* and add the rest of your code here...
}

Notice that I have YOUR code pulling the value from the object on the form (form.obj.value) instead of from the htmltable. Now when the form refreshes, the proper line SHOULD be highlighted. The only caveat here is that at some point you no longer needed to use the wrapper on the code. So, if for some reason you get an error on LoadFunct, just remove the wrapper AND your function name and just place the code in the JS file.

Mark
August 05, 2010, 12:26 PM
Dave Ayers
I am working on integrating this technique into a complete application, but it is a low priority right now.

I'll report back as soon as it is done and checked out


Regards,
Dave

http://www.daveayers.com

WebFocus/Maintain 7.6.4-8
on Win2000 and 2003 Server