OS3Grid Advanced Example: Using OS3Grid to Edit a Dataset

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

Main Page
Simple Grid
Sortable Grid
Sortable Grid
Editable Grid
Custom Callbacks
Rows Selection
Column Resize
Column Renderers
Setting and Using Styles
Using OS3Grid to edit a dataset
Advanced Cell Value Manipulation
Support OS3Grid

One of the most common questions about OS3Grid is can I edit a dataset and then save all changes?
The answer is: it depends. You actually need some good Javascript knowledge to do that. Don't forget that OS3Grid is just a presentation layer and it is as much generic as possible, so it does not offers commodities to do special tasks.

OS3Grid 0.6 introduces some new cool features that helps you track a row by adding the new methods set_row_attr() and get_row_attrs().
By using these methods, you can, for example, define an unique id to each row that will remain untouched even if the user changes all row data and sorts the OS3Grid as many times she wants to.

In our example, we'll have a dataset of user details (nick, name, e-mail addr). Binded to each row, we'll create a special 'magic' attribute that will be the row unique id. For this example, the 'magic' value will be just the user's nick prepended by the word magic.
In this example, we'll define the dataset by using the standard add_row() method and then by calling the new set_row_attrs() method with -1 as the first parameter which means "the last column just added, just like in all the other OS3Grid methods that need a row number. By calling this method we set the 'magic' value that'll help us identify the row uniquely in the dataset.
As a further optimization, our code will send back just the rows the user will actually modify and not all the dataset, so we can optimize bandwith. To do so, we'll add another attribute, called 'changed' set by default to 'NO'. We'll do stuff like the following code excerpt:

				g.add_row ( "fsoft", "Fabio Rotondo", "fsoft (@) sourceforge (dot) net" );
				g.set_row_attr ( -1, 'magic', 'magic-fsoft' );
				g.set_row_attr ( -1, 'changed', 'NO' );
		

To be able to set the row 'change' attribute to 'YES', we'll need to define a callback to change the value after the user has actually changed the row values. Our callback function will be the following:

				function row_modified ( grid, cell_pos, row_num, new_val )
				{
					var attrs = grid.get_row_attrs ( row_num );
					attrs [ 'changed' ] = 'YES';
				}	
		
and, later, after OS3Grid instantiation, we'll bind the callback, with the following code:
 g.onchange = row_modified; 

To gather the results, this example shows two functions:

Please, note that all functions will reset the 'changed' attribute to 'NO', once called so that the changed rows are notified only once.

Collect Data - Post Form