Lesson 6: Create a Dojo data grid

In this lesson, you continue to create the web client interface. You add a Dojo data grid widget to the page and populate the grid with content.

About this task

To create a grid to show the movie objects:

Procedure

In the Source view, complete the following steps:

Step	Code
Add the following code for the data grid inside the center region of the border container
Add a set of module identifiers (DataGrid and ItemFileReadStore) to the module dependency array of the require function
Add the Grid.css and claroGrid.css cascading style sheet (CSS) links to the source code of the web page Tip: Grid.css and claroGrid.css are style sheets that are specific to data grid display.

The next step is to write the Ajax function to get the data from a service URL or JSON file. Use the Dojo xhrget function to retrieve the data. Locate the dojo.ready anonymous function inside the require callback function. Inside the dojo.ready function, type dojo.xhr.
Open content assist and then select the dojo.xhrGet template:
Content assist provides a Dojo template for the xhrGet function. When you select the template, the code in the tooltip is added to your source code:
```
dojo.xhrGet( {
	url : "url",
	handleAs : "text",
	load : function(response, ioArgs) {
		
	},
	error : function(response, ioArgs) {
	}
});
```

Change the URL attribute to the Service URL or the location of the JSON file containing the data.

Option	Description
If you downloaded the JSON file	Enter the relative path to the JSON file: `MovieList.json`.
If you are using the RPC adapter service	Copy and paste the following text into the URL property:`/MyMovieProject/RPCAdapter/httprpc/MovieService/getMovieList`

Set the handleAs attribute to json, because the RPC adapter service returns a JSON file with the data.
If the data is successfully loaded, the function that the load property declares is run. Add the following code to the load property that populates the data grid:
```
var newData = {
					identifier: "title",
					items: response.result
			};
			
var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});
			var grid = dijit.byId("gridId");
			  grid.setStore(dataStore);
```
This code performs the following actions:
- Reformats the data loaded in response into the format that is required by dojo.data.ItemFileReadStore.
- Creates an ItemFileReadStore data store with the reformatted data.
- Adds the reformatted data to the data grid.
Adding the var keyword before the variable name places the variable in a scope local to the load function.
On the function that is declared in the error attribute, add the following code: alert("An error occurred while invoking the service.");
Save the page.
To test the web page, right-click ShowMovies.html in the Enterprise Explorer view and select Run As > Run on Server.
In the servers list, select your server:

Option Description

Access data directly from a JSON file Select Web Preview Server.

Use an RPC adapter service as a data source Select WebSphere Application Server 8.0.

Click Finish. The ShowMovies.html page opens in a browser.

Option	Description
Access data directly from a JSON file	Select Web Preview Server.
Use an RPC adapter service as a data source	Select WebSphere Application Server 8.0.

Results

The source code of ShowMovies.html looks like the following code sample:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css"
	href="dojo/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css"
	href="dojo/dijit/themes/claro/claro.css">
<title>ShowMovies</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript"
	data-dojo-config="isDebug: false, async: true, parseOnLoad: true"
	src="dojo/dojo/dojo.js"></script>
<script type="text/javascript">
	require(
	// Set of module identifiers
	[ "dojo", "dojo/parser", "dijit/layout/BorderContainer",
			"dijit/layout/ContentPane", "dojox/grid/DataGrid",
			"dojo/data/ItemFileReadStore" ],
	// Callback function, invoked on dependencies evaluation results
	function(dojo) {
		dojo.ready(function() {
			dojo.xhrGet({
				url : "MovieList.json",
				handleAs : "json",
				load : function(response, ioArgs) {
					var newData = {
						identifier : "title",
						items : response.result
					};
					var dataStore = new dojo.data.ItemFileReadStore({
						data : newData,
						id : "dataStoreId"
					});
					var grid = dijit.byId("gridId");
					grid.setStore(dataStore);
				},
				error : function(response, ioArgs) {
				}
			});
		});
	});
</script>
<link rel="stylesheet" type="text/css" title="Style"
	href="dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" title="Style"
	href="dojo/dojox/grid/resources/claroGrid.css">
</head>
<body class="claro">
	<div id="BorderContainer" style="height: 100%; width: 100%"
		data-dojo-type="dijit.layout.BorderContainer"
		data-dojo-props="design:'headline'">
		<div data-dojo-type="dijit.layout.ContentPane"
			data-dojo-props="region:'top'" style="text-align: center">My Movie Web Application!</div>
		<div data-dojo-type="dijit.layout.ContentPane"
			data-dojo-props="region:'center'">
			<table id="gridId" autowidth="true"
				data-dojo-type="dojox.grid.DataGrid"
				data-dojo-props="rowSelector:'20px'">
				<thead>
					<tr>
						<th field="title">Title</th>
						<th field="director">Director</th>
						<th field="actor">Actor</th>
						<th field="description">Description</th>
					</tr>
				</thead>
			</table>
		</div>
		<div data-dojo-type="dijit.layout.ContentPane"
			data-dojo-props="region:'right'"></div>
	</div>


</body>
</html>

Lesson checkpoint

You created the web page code for the Dojo client.

You learned:

How to add a data grid to a web page.
How to use content assist to rapidly write Dojo code

< Previous | Next >

Feedback