Session E-GRID

The VFP Grid:
Browse on Steroids

Jim Booth
James Booth Consulting


Remember the browse and its power. Browse provides a very effective way to display many records at once, it is flexible and fast for handling large numbers of records and is valuable for providing an interface for one to many relationships such as Customers and their Invoices. The major weakness with browse is the difficulty in integrating it with a data entry screen. Well Visual FoxPro has solved this problem with the Grid control.

Besides being easily integrated with data entry forms, the Visual FoxPro grid has pushed the limits on its flexibility. This new control is, virtually, completely configurable. Dynamic properties allow formatting the display in relation to the data (negative numbers in red etc.). The active control in a column can be any control you choose, so you can use the most appropriate control for the nature of the data.

Whither Browse

Visual FoxPro has rendered the browse obsolete. The grid has replaced browse and it is more flexible and useful than browse ever was. Actually, even though you can still type BROWSE as a command, the browse as we know it is gone! In Visual FoxPro, when you type BROWSE you get a grid in its own window. To see that this is true just the use the new NAME option of the BROWSE command. Try this session in the Command Window:

MyBrow.ColumnCount = 3
MyBrow.Columns(1).Width = 200

Notice the effect these commands have on your BROWSE. The browse is actually a grid with the properties and methods of a grid. It is modifiable just like a grid, because it IS a grid. Try the following commands for even more fun:

MyBrow.Columns(2).CurrentControl = “Edit1”
MyBrow.Columns(2).Edit1.Visible = .T.
MyBrow.Columns(2).Sparse = .F.
MyBrow.Rowheight = 38

There, a BROWSE with an editbox in the second column, scrollbars and all!

Parts is Parts

The grid is actually a container of containers. Grids contain Columns, Columns contain a Header and one or more controls. Figure 1 shows this containership;

The outer most container is the Grid itself. The Grid contains one or more Columns. The Columns, in turn, contain a Header (used for the caption at the top of the column) and one or more controls (the default control is a Textbox). Each of these items is an object onto itself with properties and methods to be used to configure the object. Let’s see what can be done with these Grids.

80% Design

There are a number of grid examples on the session disk which examine some of the more advanced things that can be done. The key to these examples is that there was considerable thought put into how the user would interact with them. Making grids that are fancy with a lot of bells and whistles is relatively easy, making these same grids work for the user takes planning. Let’s examine some of the examples from the interface design perspective.

The Dynamic Properties of a Column


Figure 1 Dynamic Column Properties

GrdDyna.scx is a demonstration of some of the dynamic properties of the grid Column. The GrdDyna.dbf table is used to populate this grid. Column 1 takes its DynamicBackColor, DynamicForeColor, DynamicFontItalic, DynamicFontBold, and DynamicFontSize from the fields named backcolor, forecolor, Italic, Bold, and Size respectively. These Dynamic properties are evaluated for each row in the grid and can be used to alter the display based on the data.

The other columns are bound to the fields that control these dynamic properties.

The Address Grid

Figure 2 An Address Block in a Grid Column

The form named GrdAddr.scx is an example of a grid that is displaying a multiline row. This is accomplished by using a Container class that has a number of textboxes arranged to display an address block. A fairly intuitive interface for the user and relatively easy to build.

The Dates Grid

Figure 3 A PageFrame in a Grid

Sometimes it is necessary to create a grid where the data is too wide to display without horizontal scrolling. This can be a nuisance to the user, they may not notice the scrollbar, or maybe find it difficult to scroll back and forth in order to see all of the data.

Using a PageFrame in a grid column let’s you present a different method for the user to selectively display data without the klunky scrolling back and forth to see other columns.

Grid in a Grid in a Grid

Figure 4 The first Grid

The first level of this grid show us the Customer information. The user can scroll through the entire customer table. By clicking on the button in the right most column the user can expose the second level grid as seen in figure 5 below.

Figure 5 The second Grid

The second level grid shows the user the orders for the customer whose row was current when the command button was clicked. Note the user of the column header to display the customer identification and also as the navigator for backing out to the first grid.

Clicking on the button in the right most column of this grid displays the third grid of the items for a particular order.