Here is step-by-step guide on how to include the grid widget on your page. Let's look first at the end result:
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:
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.
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:
In this first simple example we'll take the data for our grid from the two-dimensional javascript array.
As a minimum we should supply a number of rows/columns and a function providing the data text for a given cell.
You are not limited just to javascript arrays - the same approach could be used for XML web services and other data sources.
Let's start with column headings. Again, we just need to supply a function, which will provide heading text for each column.
Then we can change the width and the appearance of each column using the standard CSS attributes.
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:
The actual HTML source of the grid example looks like this:
One more example - using images and tooltips: