
Grid Code

<title>ActiveWidgets Examples</title>

<style type="text/css">
	.aw-quirks * {
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}

body {font: 12px Tahoma}
</style>

<script src="../../runtime/lib/aw.js" type="text/javascript"></script>
	<link href="../../runtime/styles/system/aw.css" rel="stylesheet">

<style type="text/css">
	#myGrid {height: 200px; width: 500px;}
	#myGrid .aw-row-selector {text-align: center}

#myGrid .aw-column-0 {width:  80px;}
	#myGrid .aw-column-1 {width: 200px;}
	#myGrid .aw-column-2 {text-align: right;}
	#myGrid .aw-column-3 {text-align: right;}
	#myGrid .aw-column-4 {text-align: right;}

#myGrid .aw-grid-cell {border-right: 1px solid threedlightshadow;}
	#myGrid .aw-grid-row {border-bottom: 1px solid threedlightshadow;}

/* box model fix for strict doctypes, safari */
	.aw-strict #myGrid .aw-grid-cell {padding-right: 3px;}
	.aw-strict #myGrid .aw-grid-row {padding-bottom: 3px;}

</style>

<script type="text/javascript">
	var myData = [
		["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
		["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
		["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
		["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
		["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
		["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
		["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
		["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
		["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
		["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
		["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
		["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
		["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
		["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
		["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
		["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
		["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
		["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
		["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
		["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
	];

var myColumns = [
		"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
	];
</script>
</head>
<body>
<script type="text/javascript">

//	create ActiveWidgets Grid javascript object
	var obj = new AW.UI.Grid;
	obj.setId("myGrid");

//	define data formats
	var str = new AW.Formats.String;
	var num = new AW.Formats.Number;

obj.setCellFormat([str, str, num, num, num]);

//	provide cells and headers text
	obj.setCellText(myData);
	obj.setHeaderText(myColumns);

//	set number of rows/columns
	obj.setRowCount(20);
	obj.setColumnCount(5);

//	enable row selectors
	obj.setSelectorVisible(true);
	obj.setSelectorText(function(i){return this.getRowPosition(i)+1});

//	set headers width/height
	obj.setSelectorWidth(28);
	obj.setHeaderHeight(20);

//	set row selection
	obj.setSelectionMode("single-row");

//	set click action handler
	obj.onCellClicked = function(event, col, row){window.status = this.getCellText(col, row)};

//	write grid html to the page
	document.write(obj);

</script>
</body>
</html>

Using the above API

Step 1: Change the grid data in myData[] array variable
Step 2: Change te myColumns[] array variable
Step 3: // set number of rows/columns
obj.setRowCount(20);
obj.setColumnCount(5);
Download aw.js and aw.css files (Mouse right click and save link as...)

Back