:: Home >> Examples >>

Grid widget example

Here is step-by-step guide on how to include the grid widget on your page. Let's look first at the end result:

Include ActiveUI files

The first step is to include a reference to the ActiveUI files into the <head> section of your page. You need to include two files: a javascript library file and a stylesheet file. The compressed files are located in the /runtime directory. Here is how it looks:

<link href="../runtime/classic/activeui.css" rel="stylesheet" type="text/css" /> <script src="../runtime/activeui.js"></script>

Create widget

To insert a full-featured grid into the page we would need to generate a large number of HTML tags and merge them with our data. All that will be done by the ActiveUI grid object. We just need to put a <script> block at the desired position; create new Active.Controls.Grid object and write this object back to the page using document.write() function.

<script> var obj = new Active.Controls.Grid; document.write(obj); </script>

How it works

The last line in the script above is in fact equivalent to calling toString() method of the grid object. Each ActiveUI object implements toString() method to produce the HTML markup, i.e. visual representation of the object inside HTML document. The HTML tags produced by the grid toString() method and written to the page by document.write() may look like this:

<div id="grid" class="active-controls-grid " oncontextmenu="return false" onselectstart="return false"> <div id="grid.layout/data" class="active-scroll-data "> <div id="grid.data.item:0" class="active-templates-row active-list-item " onclick="dispatch(event, this)"> <div id="grid.data.item:0.item:0" class="active-templates-text active-list-item active-column-0 active-row-cell " onclick="dispatch(event, this)"> MSFT </div> <div id="grid.data.item:0.item:1" class="active-templates-text active-list-item active-column-1 active-row-cell " onclick="dispatch(event, this)"> Microsoft Corporation </div> <div id="grid.data.item:0.item:2" class="active-templates-text active-list-item active-column-2 active-row-cell " onclick="dispatch(event, this)"> 314,571.156 </div> <div id="grid.data.item:0.item:3" class="active-templates-text active-list-item active-column-3 active-row-cell " onclick="dispatch(event, this)"> 32,187.000 </div> <div id="grid.data.item:0.item:4" class="active-templates-text active-list-item active-column-4 active-row-cell " onclick="dispatch(event, this)"> 55000 </div> </div> <div id="grid.data.item:1" class="active-templates-row active-list-item " onclick="dispatch(event, this)"> <div id="grid.data.item:1.item:0" class="active-templates-text active-list-item active-column-0 active-row-cell " onclick="dispatch(event, this)"> ORCL </div> <div id="grid.data.item:1.item:1" class="active-templates-text active-list-item active-column-1 active-row-cell " onclick="dispatch(event, this)"> Oracle Corporation </div> <div id="grid.data.item:1.item:2" class="active-templates-text active-list-item active-column-2 active-row-cell " onclick="dispatch(event, this)"> 62,615.266 </div> <div id="grid.data.item:1.item:3" class="active-templates-text active-list-item active-column-3 active-row-cell " onclick="dispatch(event, this)"> 9,519.000 </div> <div id="grid.data.item:1.item:4" class="active-templates-text active-list-item active-column-4 active-row-cell " onclick="dispatch(event, this)"> 40650 </div> </div> ... </div> </div>

Data binding

In this first simple example we'll take the data for our grid from the two-dimensional javascript array.

<script> 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"], ... ]; </script>

As a minimum we should supply a number of rows/columns and a function providing the data text for a given cell.

<script> obj.setRowCount(20); obj.setColumnCount(5); obj.setDataText(function(i, j){return myData[i][j]}); </script>

You are not limited just to javascript arrays - the same approach could be used for XML web services and other data sources.

Formatting

Let's start with column headings. Again, we just need to supply a function, which will provide heading text for each column.

<script> var myColumns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"]; obj.setColumnText(function(i){return myColumns[i]}); </script>

Then we can change the width and the appearance of each column using the standard CSS attributes.

<style> .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;} </style>

User actions

The grid object translates DHTML keyboard and mouse events to higher level 'actions', like 'deleteRow' instead of 'keydown' + 'del' key. The action call provides action source as an argument. In the example below we are sending the cell text to the browser status bar:

<script> obj.setAction("click", function(src){window.status = src.getProperty("item/text")}); </script>

Page source

The actual HTML source of the grid example looks like this:

<html> <head> <title>ActiveUI 0.1.3 - Grid widget preview</title> <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style> <!-- ActiveUI stylesheet and scripts --> <link href="../runtime/classic/activeui.css" rel="stylesheet" type="text/css" /> <script src="../runtime/activeui.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;} </style> <!-- grid data --> <script> 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> // create ActiveUI Grid javascript object var obj = new Active.Controls.Grid; // set number of rows/columns obj.setRowCount(20); obj.setColumnCount(5); // provide cells and headers text obj.setDataText(function(i, j){return myData[i][j]}); obj.setColumnText(function(i){return myColumns[i]}); // set click action handler obj.setAction("click", function(src){window.status = src.getProperty("item/text")}); // write grid html to the page document.write(obj); </script> </body> </html>

Download

Another example

One more example - using images and tooltips: