Use Dojo to develop custom widgets, part 2nd

Use Dojo to develop custom widgets, part 2nd: Generating Dojo DataGrid components with a common grid handler

Brief introduction

The custom widgets we developed for this series are based on the DOJO 1.2.3 and have been tested in V6.2 space Business on the WebSphere integration Developer V6.2 using Mozilla Firefox 3.0.11 Have tried. However, the common framework concept we developed also applies to DOJO applications that do not use Business space. Learning this series requires a basic knowledge of the DOJO and iWidget frameworks.

We will discuss topics that are frequently encountered in DOJO based applications. This series is divided into the following sections:

Part 1th: Generate DOJO markup using a generic markup handler

Part 2nd: Create a Dojo DataGrid component with paging functionality with a common grid handler

Part 3rd: Using multiple templates in IWidget and how to inherit basic widgets

Part 4: Use a common rest handler to emit a configurable rest call from IWidget

In part 2nd, we will demonstrate how to use a common grid handler to programmatically generate a Dojo DataGrid component with paging functionality. Given the reusability and ease of maintainability, we propose a flexible design approach that defines the layout itself in a JSON file.

This article will give you a complete demonstration of the steps necessary to generate the Dojo DataGrid component using the Dojogridhandler JavaScript class, and will tell you how the grid handler works. The following sample files are included in the dojo_sample.zip available for download:

Dojogridhandler.js: Universal Grid Handler JavaScript class.

Gridhandlerlayout.json: A JSON file that contains layout information for the DataGrid widget.

Dojoitemfilewritestore.js: Overwrites the Itemfilewritestore.js custom data store.

Dojopagingtable.js: A paging table Javascript class that handles paging functionality.

Pagingtable.html: The HTML template file used by the pagination widget, which contains the div tags for placing the buttons that navigate to different pages.

gridview.html: An HTML template file containing HTML markup, which contains div tags where the grid and page tables should be placed.

Define Grid Layout

The first step in generating the Dojo DataGrid is to define the grid layout. Layout information includes columns that you want to place in the grid, and additional information such as formatting information, column groupings, width of columns, and so on.

Figure 1 is the Business Space sample screen that shows a DataGrid generated using Dojogridhandler.

Figure 1. DataGrid generated by using Dojogridhandler

We'll show you how to write a JSON file that generates the layout information for the previous example, but we'll first describe how the grid handler actually generates the Dojo DataGrid widget.