Lesson 5: Script the data grid

Now that you have declared the grid, you can write the necessary JavaScript™ that loads the data from our MovieService Java™ object, and to bind that data to the grid.

To script the data grid:

Create the structure of the grid and model JavaScript objects declared in the previous lesson:
In the Source view of ShowMovies.jsp, add the following code inside the <head> tag:
```
<script type="text/javascript">

// Data Grid layout
// A grid view is a group of columns
var view1 = {
	cells: [[
		{name: 'Name', field: "title"},
		{name: 'Actor',  field: "actor"}
	]]
};
// A grid layout is an array of views
var layout = [ view1 ];
 
// Model for the Data Grid
 model = new dojox.grid.data.Objects([{key: "title"}, {key: "actor"}], null);

</script>
```
The JavaScript that you just wrote loads the data from your MovieService Java object and binds it to the grid.

The layout variable configures the layout of the grid. Dojo grid layouts are declared as arrays of views. Each view is declared as an array of rows. Row can also contain rows, that is why the cells object is enclosed with two sets of braces. The code above declares two columns: Name and Actor.

The model variable declares the type of Dojo object that the Grid will use as its JSON data store. Depending on how the data is structured, Dojo provides different options for the model object. The dojox.grid.data.Objects object is used when the data for the grid is a collection of objects. In this tutorial, you grid is a collection of Movie objects. The model constructor takes an array of JavaScript objects that indicate the field name of the JSON being bound to the model. In this tutorial the JSON field for the movie is title and the field for the actor is actor.
Create the populateGrid JavaScript function declared in the previous lesson:
In the Source view of ShowMovies.jsp, add the following code inside the <script> tag that you added in the previous step:
```
// Issue an asynchronous request to the server for data
function populateGrid() {
     dojo.xhrGet({
         url: "/web2Project/RPCAdapter/httprpc/MovieService/getMovieList",
         load: fillGrid,
         error: handleError,
         handleAs: 'json'
     });
}
```
The populateGrid function contains one function call that represents the core functionality of your application. dojo.xhrGet executes an asynchronous request to the URL specified by url. When the response from the URL is returned, the function specified by load is called and the response is passed to that function. error is called if there is a problem during the processing of the response. handleAs determines how the response is structured. In this tutorial, the RPC Adapter returns the data as JSON.

Tip: To save time when typing the URL for the dojo.xhrGet calls that invoke the RPC Adapter services, right-click the service method in the Page Data view and click Copy Service URL to Clipboard. You can then paste the URL after url:.
Create the load function declared in populateGrid:
In the Source view of ShowMovies.jsp, add the following code inside the <script> tag that you added in the first step of this lesson:
```
// Process the response to the asynchronous request
function fillGrid (data, ioArgs) {
 	 model.setData(data.result);
}
```
The code you just wrote binds the data to the model of the grid. By calling setData the Dojo grid is automatically populated with the data returned from the asynchronous request. The RPC Adapter JSON result sets are always structured with a top-level object called result; therefore, the reference to the result set is data.result.
Create the handleError function declare in populateGrid:
In the Source view of ShowMovies.jsp, add the following code inside the <script> tag that you added in the first step of this lesson:
```
function handleError() {
		alert("An error occurred while invoking the service.");
}
```

ShowMovies.jsp source looks like the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@page
	language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>ShowMovies</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="Eclipse Platform">
<style type="text/css">
	@import "dojo/dojox/grid/_grid/Grid.css";
</style>
<script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
<script type="text/javascript">
	dojo.require("dojox.grid.Grid");
	dojo.require("dojox.grid._data.model");
	dojo.require("dojo.parser");
</script>
<script type="text/javascript">

// Issue an asynchronous request to the server for data.
function populateGrid() {
	dojo.xhrGet({
		url: "/web2Project/RPCAdapter/httprpc/MovieService/getMovieList",
		load: fillGrid,
		error: handleError,
		handleAs: 'json'
		});
	}
// Data Grid layout
// a grid view is a group of columns
var view1 = {
	cells: [[
		{name: 'Name', field: "title"},
		{name: 'Actor',  field: "actor"}
		]]
	};

// a grid layout is an array of views.
var layout = [ view1 ];
 
// Model for the Data Grid
model = new dojox.grid.data.Objects([{key: "title"}, {key: "actor"}], null);

 // Process the response to the asynchronous request
function fillGrid(data, ioArgs) {
	model.setData(data.result);
	}

function handleError() {
	alert("An error occurred while invoking the service.");
	}
 
</script>
</head>
<body>
	<div class="heading">Movies Grid</div>
	<input type="button" value="Load Movies" onclick="populateGrid();" />
	<div id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>
</body>
</html>

To test the Web page:

In the Enterprise Explorer view, right-click MovieService.jsp, then select Run As > Run on Server. The Run On Server window opens.
In the servers list, select WebSphere Application Server v7.0, then click Finish.

ShowMovies.jsp opens in a browser.

When you click Load Movies, the grid is populated with the data without refreshing the Web page. The request for the data and the update of the Grid were made asynchronously.

The grid is updated with data without refreshing the Web page.

Lesson 5: Script the data grid

Lesson checkpoint