This is a doc I wrote for myself for just this purpose (only I migrated from even older version ;-)
Some of the stuff is ColdFusion-specific and my coding style-specific; just ignore what you don't need. Replace capitalized OBJ and DATA with script-specific names.
Hope this helps.
Migrating active widgets from v.1 (GPL) to v.2.5 (commercial)
1. Change DTD inclusion from
<cfif MSIE67><html><cfelse>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
</cfif>
to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
2. Change style reference
<link href="../classic/grid.css" rel="stylesheet" type="text/css">
to
<link href="../runtime/styles/classic/aw.css" rel="stylesheet" type="text/css">
3. Change names on browser-specific styles to avoid name conflict.
Include ../awquirks.css after browser-specific styles.
4. Change library from
<script type="text/javascript" src="../grid.js"></script>
to
<script type="text/javascript" src="../runtime/lib/aw.js"></script>
5. Change all references to Active.Formats to AW.Formats
6. Change .setDataFormat("auto") to ..setDataFormat("default") for dates.
7. Change all references to Active.Controls.Grid to AW.UI.Grid
8. Change grid setup from
OBJ.setColumnHeaderHeight("1.5em");
OBJ.setColumnProperty("count", Headers.length);
OBJ.setDataText(function(i, j){return formats[j].dataToText(DATA[i][j])});
OBJ.setDataValue(function(i, j){return formats[j].dataToValue(DATA[i][j])});
OBJ.setRowProperty("count", DATA.length);
OBJ.setColumnProperty("text", function(i){return Headers[i]});
to
OBJ.setHeaderHeight(30);
OBJ.setColumnCount(Headers.length);
OBJ.setRowCount(DATA.length);
OBJ.setHeaderText(function(i){return Headers[i]});
OBJ.setCellData(DATA);
OBJ.setCellFormat(formats);
OBJ.setVirtualMode(false);
OBJ.setSelectionMode("single-row");
9. Change onClick function definition from
OBJ.setAction("click", function(src){
var row = src.getRowProperty("index");
document.main.search.value=this.getDataProperty("text", row, 0);
// rest of actions
});
to
OBJ.onRowClicked = function(event, rowIndex) {
document.main.search.value=this.getCellValue(0,rowIndex);
// rest of actions
};
10. Remove grid width from <div> style; put it into included style sheet.
11. All selectors (not just the first one) should have #objID prefix.
All .active- should be replace with .aw-
The first selector should include width as well as height.
At the end add
/* box model fix for strict doctypes, safari */
.aw-strict #objID .aw-grid-cell {padding-right: 3px;}
.aw-strict #objID .aw-grid-row {padding-bottom: 3px;}
12. In IE-specific styles replace
.active-row-cell {line-height: 1.2em;}
with
#objID .aw-grid-cell { line-height: 1.1em; height: 1.1em; }
and change .aw-grid-row style to {border-bottom:0.1em ...; height:1.1em;}
13. Use new ../browcheck.cfm
14. If dynamic color: in the .cfm file
OBJ.defineRowProperty("Mybackcolor", function(row){
var stats = this.getCellValue(1,row);
return (if green)?"#66ff66":(if red)?"#ff6666":"threedlightshadow";
});
OBJ.getRowTemplate().setStyle("background-color", function(){
return this.getRowProperty("Mybackcolor");
});
In the .css include
#objID .aw-rows-selected { background: blue!important; }