

<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>

<style> body, html
{margin:0px; padding: 0px; overflow: hidden;} </style>

<!-- ActiveWidgets stylesheet and scripts -->
<link href="gridRuntime/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="gridRuntime/lib/grid.js"></script>

<!-- grid format -->
<style>

.active-controls-grid
{height: 100%; font: menu;}


.active-column-0
{width: 80px;}

.active-column-1
{width: 200px; background-color: threedlightshadow;}

.active-column-2
{text-align: right;}

.active-column-3
{text-align: right;}

.active-column-4
{text-align: right;}

.active-column-5
{text-align: right;}


.active-grid-column
{border-right: 1px solid threedshadow;}

.active-grid-row
{border-bottom: 1px solid threedlightshadow;}
</style>
</head>
<body>
<script>

// create data formats
var string = new Active.Formats.String;
var number1 = new Active.Formats.Number;
var number2 = new Active.Formats.Number;
var date = new Active.Formats.Date;

// define formatting rule for text output
number1.setTextFormat("#,###.##");
number2.setTextFormat("");

date.setTextFormat("dd mmm yy");
date.setDataFormat("ISO8061");

// create ActiveWidgets data model - XML-based table
var table = new Active.XML.Table;

// provide data URL
table.setURL("gridExamples/data/companies-array.xml");

// define namespace for selecting column data
table.setNamespace("co", "http://tempuri.org/");

// set column XPath
table.setColumns(["co:ticker", "co:name", "co:marketcap", "co:sales", "co:employees", "co:timestamp"]);

// set column formatting
table.setFormats([string, string, number1, number1, number2, date]);

// start asyncronous data retrieval
table.request();

// define column labels
var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees", "Date"];

// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;

// provide column labels
obj.setColumnProperty("texts", columns);

// provide external model as a grid data source
obj.setDataModel(table);

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

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