One thing left in order to finish up with the practice - to spruce up. Let's start with adding a visual mark for edited lines. The field “Updated” has already been set in such a way that we need only to introduce slight changes into the data loading code to make changed data from the local data store look like newly edited one.

Code (javascript)

• style is used to mark already edited lines

• data.push({

• function fill_grid(){
  id:rs.field(0),

• function fill_grid(){
  style:rs.field(16)?‘font-weight:bold;’:”,

• function fill_grid(){
  data:[rs.field(1),
  rs.field(2),
  rs.field(3),
  rs.field(4),
  rs.field(5),
  rs.field(6),
  rs.field(7),
  rs.field(8),
  rs.field(9),
  rs.field(10),
  rs.field(11),
  rs.field(12),
  rs.field(13),
  rs.field(14),
  rs.field(15)]})

This point turned out to be quite time consuming in spite of all its simplicity. As it turned out, the basic version of grid can't load styles from json data. This was healed with the help of a patch found at the support forum. But the whole affair left a bitter taste in my mouth.

When the grid is saved in the database, it would be a good thing to clear the data store. Code (javascript)

• function save_data(){

• if there is Google Gears

• if (db)

• clear the table we used - a disputable method, but in this case it's effective

• db.execute(‘drop table photodata’)

• document.forms[0].data.value=grid.serializeToCSV();

• document.forms[0].submit();

• }

You can see the result here. Edited lines still remain visually different when the page is reloaded, thus it's easy to notice the changes. Full page reloading and data store clearing take place while the page is being saved. Everything works from the technical point of view. As the last step we can add some free useful things such as sorting and filtering. Both the possibilities are standard for grid and don't require any voodoo programming.

Code (javascript)

• grid.setColSorting("str,str,str,int,int,int,str,str,int,int,int,int,int,str,na");

• grid.attachHeader("#rspan,#select_filter,#select_filter,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan");

The final result is available here.