Adv. Example: Setting and Using Styles

In this advanced example, I'll show you how to create dynamic web forms. The main goal of this example is to enable the developer to create forms on the fly inside the OS3Grid. Suppose you want the user to edit the dataset (as shown in Advanced Edit example, but also, you want her to be able to choose from a list (a <select> widget).

To achieve our goal, we'll make the last column (the one containing the user type) clickable. One the user clicks on the cell, a dropdown list will be shown to enable the user to select from the list rather than have her to write in all the string, which is more error prone.

There are a lot way to have our OS3Grid display a dropdown list one clicked on a cell, but, for sure, since we are using the powerful OS3Grid, the best one is to create a column rendered, as shown in Example 8 - Column Renderers. Our column renderer is the following:

				function list_renderer ( val, id )
				{
					return '<span onclick="show_list( \'' + id + '\', \'' + val + '\')">' + val + '</span>';
				}

This code will actually render in the cell a <span> element that will react to user clicks, showing the dropdown list. PLEASE NOTE that since OS3Grid version 0.6, the list_renderer function can take two parameters: the first is the cell value (as usual), and the second is the ful_id of the cell.

Here there is the show_list() callback code:

				function show_list ( id, val )
				{
					var span = document.getElementById ( id ).firstChild;

					var lst = [ 
							[ "admin", "Administrator" ],
							[ "user",  "User" ],
							[ "beta",  "Beta Tester" ],
						  ];

					var t, chk, c, l = lst.length;
					var curr_v = span.innerHTML;
					var s;

					s = '<select onchange="list_changed(this.value,\'' + id + '\')">';
					for ( t = 0; t < l; t ++ )
					{
						c =  lst [ t ];
						if ( c [ 0 ] == curr_v )
							chk = 'selected="selected"';
						else
							chk = '';

						s += '<option value="' + c [ 0 ] + '" ' + chk + '>' + c [ 1 ] + '</option>';
					}
					s += '</select>';

					span.innerHTML = s;
				}

The first line simply get the <span> element from the page, then the list of possible values is defined. The for() cycles through all the possible values and builds the <select> option list, then the <span> element HTML is replaced by the <select> element so the dropdown list is shown.

Once the user selects a value from the list, we have to write the value into the <span> removing the dropdown list, this is the callback code:

				function list_changed ( val, id )
				{
					var g = os3grid_set_cell_value ( id, val );
					g.render ();
				}

And that's all! By combining this feature with the Edit Datasets example, you can create very powerful and flexible webforms!!

OS3Grid Advanced Example: Advanced Cell Value Manipulation

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