More information on this topic is available in the documentation section: /active.howto/.
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="./grid.css" rel="stylesheet" type="text/css" ></link>
<script src="./grid.js"></script>
<!-- grid format -->
<style>
.active-controls-grid {height: 100%; font: menu;}
.active-column-0 {width: 80px;}
.active-column-1 {width: 200px;}
.active-column-2 {text-align: right;}
.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
<!-- grid data -->
<script>
var myData = new Array();
<?
$name = array("c","cc", "ccc");
$sql = "SELECT c , cc, ccc FROM table1";
$stmt=ociparse($con,$sql);
ociexecute($stmt);
OCIFetchStatement($stmt,$row,0,-1,OCI_FETCHSTATEMENT_BY_ROW);
foreach($row as $key=>$value){
echo "myData.push([";
foreach ($name as $k1=>$v1){
echo "\"".$value[$v1]."\",";
}
echo " ]);";
}
?>
var myColumns = [
"Ticker", "Company Name", "Market Cap."
];
</script>
</head>
<body>
<script>
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
// set number of rows/columns
obj.setRowProperty("count", 20);
obj.setColumnProperty("count", 3);
// provide cells and headers text
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});
// set headers width/height
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");
// set click action handler
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
var row = obj.getTemplate("row");
row.setEvent("onkeydown",function(){this.action("myAction")});
obj.setAction("myAction",function(src){
alert();
});
obj.setProperty("selection/index", 0);
document.write(obj);
obj.refresh();
obj.element().focus();
</script>
</body>
</html>
hope it helps...