OS3 Grid Example 1

This is the very basic example. In this example I'll show you how to setup the basic grid and populate it with data.
As you'll see, it's not difficult at all! :-)
First of all, you have to include the OS3Grid files inside your page, this is as simply as:

			<link type="text/css" rel="stylesheet" href="os3grid.css" />
			<script src="os3grid.js" type="text/javascript"></script>

Please, remember to set the right paths of os3grid.css and os3grid.js.
Then, for the real stuff, you have to create an HTML object as a placeholder where the grid will be rendered once created. The HTML object MUST have an unique id (for the getElementById() call by the Grid itself). Usually, I create a <div> block, like the following:

			<div id="grid" ></div>

Then, you have to create your grid using JavaScript. Grid attributes and settings are explained in Standard Grid Documentation, here I'll give you just a glimpse at the code:

			<script type="text/javascript">
				// Create an OS3Grid instance
				var g = new OS3Grid ();

				// Grid Headers are the grid column names
				g.set_headers ( 'nick', 'Name', 'Surname', 'E-Mail Address' );

				// If contents is bigger than container, Grid will automatically show scrollbars
				g.set_scrollbars ( true );

				// The grid will have a solid border (these are CSS attributes)
				g.set_border ( 1, "solid", "#cccccc" );

				// Now, we add some rows to the grid
				g.add_row ( 'fsoft', 'Fabio', 'Rotondo', 'fsoft (@) sourceforge (dot) net' );
				g.add_row ( 'john', 'John', 'Bustone', 'jbust (@) somewhere (dot) net' );
				g.add_row ( 'mkey', 'Mark', 'Key', 'mkey (@) okay (dot) net' );
				g.add_row ( 'jdoe', 'John', 'Doe', 'redbull (@) batman (dot) net' );

				// Show the grid replacing the original HTML object with the "grid" ID.
				g.render ( 'grid' );
			</script>

That's all! The result should be quite similar with the following:

OS3Grid Example 1 - Simple Grid

By Fabio Rotondo - fsoft (@) sourceforge ( dot ) net