Faddie bloggt – schon wieder!

Dojo Tutorial with a grid: part 3 – english version

Now we’re dealing with that grid. Finally, since we’ve been kept busy with the basics so far

3.6 dojo.grid in javascript

After search for the name “Petersen”, the webserver returns a JSON-String, containing all people with this name. Our goal is now to process this data into a grid .

So let’s have a look at gridtut.js again.

Using the command “var result = eval(‘(‘+data+’)');” an array (or better a javascript object) is beeing created from the JSON-string and been saved in the variable “result”.

With this array, we can now populate the grid… but wait, there definately missing a grid :-O

Firstof all, we have to tell the grid, how many columns we want to use. This is called view in the world of dojo. Here’s the example for our view:

var view1 = {
	cells: [
		[
			{name: 'Customer_ID', field:'id'},
			{name: 'Given Name', field:'givname'},
			{name: 'Name', field:'surname'},
			{name: 'Job', field:'job'},
			{name: 'Age', field:'age'},
			{name: 'Action', get: linkInGrid}
		]
	]
};

The property cells contains an array (that why we use square brackets), containing small objects (curly brackets). The property “name” of those objects contains the title for the column header, the property “field” contains the name field of the data array we’re going to display.

Lazyness wants us to use global variables so we can access the grid (and the datastore) from all functions and we need a some sample data.

var ddata;
var grid;
var store;
var layout = [ view1 ];

var dummydata = { "identifier": 'id',
				   "items":[
				     {	"id": 0,
				     	"givname":"There is",
				      	"surname":"no data ",
				      	"job": "-",
				      	"age": 0}
				   ]
};

The dojo grid ist very flexible and supports rows, subrows and even subgrids.  The column-layout is defined by the variable “layout “(obviously ) and we use our just created view for that. The square brackets are mandatory by the way, because we have to use an array again.

The dummy data is usefull in two ways:

1) we can test the grid and exclude the webserver as an error source

2) the sample data is used an a message, that no data has been found. Also the grid only needs to be updated in the future, the creation has been done during the first call of the page.

For the sample data, we need the property “identifier” to tell the grid about our dataset’s primary key (or better: unique identifier)

The property “items” contains the datasets in an array.

Following function is going to create the grid:

function createGrid(myData) {

	store = new dojo.data.ItemFileReadStore({jsId: 'jsonStore',data: myData});

	ddata = new dojox.grid.data.DojoData(null,store,{jsId: 'model', clientSort: true, query: { id: '*' }});

	grid = new dojox.Grid({id: "OurGrid", model: ddata, onRowMouseOver: keepPopup});

	dojo.byId("gridContainer").appendChild(grid.domNode);

	grid.setStructure(layout);

	grid.startup();
}

A lot of stuff has been done here, so we better take a close look.

Line 2:
The first thing we do, is to create an ItemFileReadStore using the dojo data model. It gets the javascript id “jsonStore” (as I’ve told you, Dojo likes ids) . For the second parameter we pass our data array – to keep the function flexible, we use the variable mydata (the parameter in the function call).

Line 3:
Since we now have an ItemFileReadStore, we have to connect it with the grid. The grid knows two ways for the data connection: grid.data.DojoData and grid.data.Table.

Using the table object could be easier: Just pass some sample data without encapsulation in identifier and items. Just plain data, even an ItemFileReadStore isn’t necessary.

// easy but not userful for us...

ddata = new dojox.grid.data.Table(null, dummydaten);

Well, this is not too hard, but unfortunately not too useful So we have to use DojoData and pass our store to it. The property “clientSort”allows the user to sort the data locally with the browser. Looking at the property “query” show us it’s relationship to the database world. We’re telling the model to collect all unique record sets, using id as a primary key – somehow a client-side “SELECT *”.

Line 4:
Finally we create the grid itself. It gets an Id and we pass the store, as well as the model.

Line 5:
We also have the define the layout und use “setStructure” for that.

Line 6:
In part 1  we already defined a placeholder for the grid (that <div>-Container) and here we attach the grid to it.

Line 7:
At last it’s time to start the grid. Our just created function might come handy for this task

createGrid(dummydaten);

Only a little  bit of CSS is needed, we add to our html-file:

<style type="text/css">

 div.gridDiv {

 width: 600px;

 height: 450px;

 }

</style>

It is necessary to define the grid’s width, otherwise nothing is shown – this is a popular error source by the way.

If we’ve been good, the following is shown (depending on your language, of course):

More to come in the next part.

---