dhtmlxgrid:step_four_google_gears_enters_the_game [Skin test wiki]

Step Four - Google Gears Enters the Game

Now when everything works, we can think of some useful ingredients. Data saving is one of the things that seem obvious. In my personal experience, data loss is the nastiest thing that may happen (network connection loss, program error, some accidentally pressed button - losing is much easier than creating). In case of using Google Gear, you can store all the information on client's side. Then if a page is reloaded or even closed, the data won't be lost. During your next visit the data can be restored out of the local storage. Unlike grid, Gears's initialization and configuring are troublesome. As a first step we need to install Gears and create a database.

Code (javascript)

check the availability of Google Gears; if it is not installed, everything will operate without any changes

if (!window.google) 
return alert("The page requires Google
 Gears \n It will work without it as well, but you will not be 
able to work offline.");

if Google Gears is installed, we create a local database

db = google.gears.factory.create(‘beta.database’);

check database creation. Gears requests user's permission and the user can well deny the operation

```
if (db) {
```

create the required table, we set all the fields as varchar(255) to avoid any mess

a table field is created for each column in grid, plus one additional field - updated - that will save the status of data lines

```
db.open(‘gearsgrid’);
```

db.execute(‘create table if not exists photodata (pkID varchar(255),
 Name varchar(255), Manufacturer varchar(255), Format varchar(255),
 Horizontal varchar(255), Vertical varchar(255), Zoom varchar(255), 
varchar(255), Viewfinder varchar(255), LCD varchar(255),
 Weight varchar(255), Width varchar(255), Height varchar(255),
 Depth varchar(255), Known varchar(255), Link varchar(255), updated int)’);

check whether there is data in the database or it is the first loading

var rs = db.execute(’select count(*) from photodata’);

if the data is not loaded yet

```
if (rs.field(0)==0){
```

create the query and get the data

var request = google.gears.factory.create(‘beta.httprequest’);

request.open(‘GET’, ‘data.csv?uid=’+(new Date()).valueOf());

request.onreadystatechange = function() {

```
if (request.readyState == 4){
```

split the derived CSV file into lines

var data=request.responseText.split("\n");

```
for (var i=0; i < data.length; i++){
```

split the lines into columns

```
var fields=data[i].split(";")
```

set the reloading flag to 0

```
fields.push(0)
```

save in the local database

db.execute("insert into photodata values(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)",fields);

```
};
```

invoke the function of grid filling

```
fill_grid();
```

```
}
```

```
};
```

```
request.send();
```

```
}
```

```
rs.close();
```

```
}
```

If you don't receive any data working with the object “request”,
check the character encoding in the loaded document.
If it is not Us-ASCII | Unicode, “request” will return null - such a nice peculiarity.

As promised - this code fragment came out to be fairly big, but it is not complicated. There's just a lot of text in it. The Gears loaded the data into the local database, and now the grid can be populated with this data. Code (javascript)

```
function fill_grid(){
```

if (db){        //if there is Google Gears

```
var data=[];
```

choose the data

var rs=db.execute("select * from photodata");

form the array of data for grid

```
while (rs.isValidRow()) {
```

```
data.push({
```

id:rs.field(0),
 
  *  <code javascript>
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)]});

```
rs.next();
```

```
}
```

```
rs.close();
```

load the data into grid

```
grid.clearAll();
```

```
grid.parse({rows:data},"json")
```

```
} else
```

if there's no Google Gears, load the data right from the server

grid.load("data.csv?uid="+grid.uid(),"csv");

```
}
```

Two examples described above allow us proxying the data through Google Gears. But there's no other particular use of this, except for some traffic saving (when the second loading takes place, the data will be loaded from the local data store). Though if you load huge datasets, the saving can be substantial. There is one step left to make Gears really wholesome: Code (javascript)

  
*  <code javascript>

grid.attachEvent(“onEditCell”,function(stage,id,ind,value){ </code>

```
if (stage==2){
```

grid.setRowTextStyle(id,"font-weight:bold;");

if there is Google Gears

if (db) //save a new cell value in the local data store

db.execute("update photodata set "+columns[ind]+"=?, updated=1 where pkID=?",[value,id]);

```
}
```

```
return true;
```

```
})
```

The result is available here If GoogleGears is not installed - everything continues to work as it was with the previous examples. If GoogleGears is installed, everything gets rather interesting: edit the cell and press F5. When the page is reloaded, new edited data will be presented in grid. You might just as well close the browser window and visit the same page using some other browser - edited data will still be there. Whatever the software and the network connection troubles are, there's no way to lose your data!