Image of Navigational Map linked to Home / Contents / Search WebGrid

by Rupert Walsh - GUI Computing
Image of Line Break

Those of us that write a lot of ASP code to retrieve data from databases will be pretty familiar with displaying that data in tables. Like me, you're probably sick of the old "open recordset, do while not eof, write a row, movenext, and loop" routine. Here's some code that does just that, creating a generic table from any old recordset without any formatting:

'Assume ADO recordset rsTest has been opened already
   
    response.write "<Table border='1'>"

    'Do Titles
    response.write "<tr>"
        For each oField in rsTest.Fields
            response.write "<td>"
                response.write oField.Name
            response.write "</td>"
        next
    response.write "</tr>"
   
    'Do Data
    rsTest.MoveFirst
    do while not rsTest.eof
        response.write "<tr>"
            For Each oField in rsTest.Fields
                response.write "<td>"
                    response.write rsTest(oField.Name)
                response.write "</td>"
            next
        response.write "</tr>"
        rsTest.MoveNext
    loop
   
    response.write "</Table>"

With WebGrid, this functionality is wrapped up for you in a reusable object. You can achieve the above by binding the ADO recordset rsTest to WebGrid with the following code:

    'Assume ADO recordset rsTest has been opened already
   
    'Create the object
    Set TableHTML = Server.CreateObject("LuxentWebGrid.TableHTML")
   
    'Get WebGrid to automatically layout the fields
    TableHTML.AutoLayout rsTest

    'Send the Table HTML to the client
    Response.Write(TableHTML.HTMLResult)

It's easy to see which code is simpler. Of course, you could put the code at top into a function and include it in each asp page you write. You could also write functions to control column and cell formatting, data formatting, etc., etc., and could even write them into your own ActiveX DLL. But why would you when Luxent has already done the hard work?

WebGrid actually contains 3 base classes: TableHTML, GridHTML and SelectHTML

TableHTML

This is used for the traditional "1 row per record" grid layout, as in the above code samples. The TableHTML class contains a collection of ColumnHTML objects. These can be filled automatically from an ADODB recordset using the AutoLayout function, or can be set using code. You can control the font formatting, data formatting, borders, alignment and colors. Images and hyperlinks (both HTTP and MailTo) are also handled.

Here's a simple example of the output from WebGrid, using an Australian Rules Football fixture for the data:
 
MatchNumber HomeTeam AwayTeam
1 North Melbourne West Coast
2 Carlton Adelaide
3 Collingwood Hawthorn
4 St Kilda Geelong
5 Brisbane West Bulldogs
7 Port Adelaide Sydney
8 Richmond Essendon
9 Fremantle Melbourne

Here's the code for the above example:

'Assume ADO recordset rsTest has been opened already
Set TableHTML = Server.CreateObject("LuxentWebGrid.TableHTML")

'Ask for an AutoLayout of the table
TableHTML.AutoLayout rsTest
TableHTML.Columns(0).FontBold = True
response.write TableHTML.HTMLResult

GridHTML

This is used for multiple-rows per record layout. This mode is not as straightforward as the TableHTML mode, and I advise you to read this description while referring to the annotated grid below. The GridHTML object contains a 2 dimensional array of Box objects. Each Box object represents a single record from the underlying data. You specify how many rows to have across the page with then Grid.BoxPerRow property, and can specify the number of Boxes down the page with the Grid.BoxPerPage property. You can think of it as having a sub-table for each record (in fact, this is exactly how it is implemented). Each box has a 2 dimensional array of 'Cells', which are in fact a ColumnHTML objects (as used by TableHTML). The cells allow you specify which fields to place where in each box, and how to format them.

The best way to demonstrate the difference between the tableHTML and GridHTML is with another example, using the same data as used for the TableHTML:

Once again, here's the source for the above example:

'Create one HTML Grid object
Set Grid = Server.CreateObject("LuxentWebGrid.GridHTML")

Grid.BoxPerRow = 2
Grid.BoxPerPage = 8
Grid.Recordset = rsTest
Grid.CellSpacing = 10
Grid.BoxAlignVertical = cvaTop

Grid.Box.CellsNumberHorizontal = 3
Grid.Box.CellsNumberVertical = 2
Grid.Box.Frame = ftFrameVoid

Grid.Box.Cells(0, 0).Fields.New Nothing, "MatchNumberCaption"
Grid.Box.Cells(0, 0).Fields("MatchNumberCaption").FixedValue = "Match"
Grid.Box.Cells(0, 0).FontBold = True
Grid.Box.Cells(0, 0).Fields("MatchNumberCaption").FontFace = "Arial"

Grid.Box.Cells(0, 1).Fields.New rsTest, "MatchNumber"
Grid.Box.Cells(0, 1).FontBold = True
Grid.Box.Cells(0, 1).AlignVertical = cvaTop
Grid.Box.Cells(0, 1).Fields("MatchNumber").FontFace = "Arial"

'Trick. When you want to display a fix information, just create a Field with no RecordSet and 
'fill the FixedValue property with the string to display

Grid.Box.Cells(1, 0).Fields.New Nothing, "HomeTeamCaption"
Grid.Box.Cells(1, 0).Fields("HomeTeamCaption").FixedValue = "Home Team"
Grid.Box.Cells(1, 0).Fields("HomeTeamCaption").FontFace = "Arial"

Grid.Box.Cells(2, 0).Fields.New rsTest, "HomeTeam"
Grid.Box.Cells(2, 0).Fields("HomeTeam").FontFace = "Arial"

Grid.Box.Cells(1, 1).Fields.New Nothing, "AwayTeamCaption"
Grid.Box.Cells(1, 1).Fields("AwayTeamCaption").FixedValue = "Away Team"
Grid.Box.Cells(1, 1).Fields("AwayTeamCaption").FontFace = "Arial"

Grid.Box.Cells(2, 1).Fields.New rsTest, "AwayTeam"
Grid.Box.Cells(2, 1).Fields("AwayTeam").FontFace = "Arial"
'Write the grid built by WebGrid to the browser
Response.Write( Grid.HtmlResult )


rsTest.close
connDB.Close
set rsTest = nothing
set connDB = nothing

In the supplied documentation (help file), Luxent themselves don't do a good job of explaining how this mode works. In fact, the help file is probably a little more sparse than it could have been, and is structured so that the index is not particularly useful. It would be useful if programmers abstracted topics in help files as they (should) abstract routines in their programs. The rewards of readability and maintainability are equally valid for documentation. Unfortunately, this is often not the case.

SelectHTML

This is used to create drop-down or list box controls, and works to save coding in the same way as the TableHTML class. With this class, you can create drop-downs, lists, multiselect lists etc. Here's some code that fills a combo box called "ItemTypeComboBox", that frees you from coding each 'option' in a recordset loop:

'Assume rsProducts has been opened already

Set SelectItemType = Server.CreateObject("LuxentWebGrid.SelectHTML")
SelectItemType.AutoLayout rsProducts, Array("ProductType"), "ItemTypeComboBox", 0, False, "ProductType"
Response.Write( SelectItemType.HtmlResult )

Built-in Formatting

Field Formatting

WebGrid has a number of formats built in for use when displaying fields in a table or grid. These include date or numeric formatting (using a format string similar to VB's Format() function), logical formatting (values to display if field value is true or false), and trimming of spaces (similar to VB's Trim() function). These should be enough to satisfy any data you have.

Image Handling

If you store image URLs in your database, WebGrid can display these images for you. Webgrid can handle image reference fields automatically, and by default tries to substitute images for fields containing "URL" in their name. You can also set WebGrid to substitute images whenever ".GIF" is in a field's value, or you can manually tell WebGrid that a field contains image URL's by setting the FieldHTML.AsImage property to True.

Color Schemes

Webgrid has 8 preset color schemes, which can be set using the autoformat property for either a tableHTML or gridHTML
afSimple
afClassicBlue
afClassicGreen
afClassicRed
afClassicYellow
afPaddedBlue
afPaddedGreen
afPaddedRed
afPaddedYellow

Whether you like these schemes or not is a matter or preference, but note that I found that some of the colors used (such as the teal background in the Classic Blue scheme) didn't come out correctly in 256 color mode. In high color, the schemes are not garish, and would probably be acceptable to most people. Congratulations to Luxent for not falling into the trap of providing 1000 ugly schemes. However, if you like colorful grids, WebGrid gives you the power to format each column individually. Here's one of Luxent's samples:

The Verdict

If you need to display a lot of data in a consistent manner, and with a minimum of coding, WebGrid may be the answer for you. You'll have results quickly, little debugging and a consistent style, which will put you ahead of 95% of web-builders out there. For more complex web pages, the choice to use WebGrid over traditional ASP code is not so clear cut. You may not easily be able to get WebGrid to do exactly what you want, and it will take some time to learn all of WebGrid's properties and methods. As I said before, it's also a pity that WebGrid's help file is not as comprehensive or useable as it might have been. You're most likely better off going straight to the examples supplied with the product.

Let's face it, code re-use is not as easy as it should be with ASP, but using Luxent's WebGrid object is a step in the right direction. I should also mention that the HTML WebGrid generates is clean and nicely formatted, which is handy when it comes to debuging your code. If you use a lot of grids, and are prepared to learn the product, WebGrid is a worthy addition to your toolbox.

A new version of WebGrid has been released by Luxent, unfortunately not in time for this review. It includes a visual design-time controls for use in Visual Interdev and FrontPage, which should make creating grids even easier, removing much of the coding required. For details, see Luxent's web site



Written by: Rupert Walsh
June '98

Image of Arrow linked to Next Article
Image of Line Break
[HOME] [TABLE OF CONTENTS] [SEARCH]