Tutorial: Using the Grid Control

The objective of this tutorial is to learn how to create and use a grid. At the end of this tutorial you should be able to:

• Create an appropriately sized and positioned grid on a form.

• Make appropriate rows and columns fixed and label headings appropriately.

• Resize column widths and row heights.

• Change text alignment in fixed and unfixed columns.

• Enter values into specific cells.

Introduction

The grid control creates tables which are capable of holding text and/or graphics. Grids are often useful for presenting and summarising numeric data like a spreadsheet. The size of a grid can be controlled by the two properties: Row (depth), and Col (width). The maximum size of a grid is 2000 rows and 400 columns. Individual boxes within a grid are referred to as cells. Each cell, like an array element, is referred to by two co-ordinates (row and col). The contents of each cell can be both read and written to at run-time.

Task

Create a home expenses grid to make personal accounting easier.

1. Select the grid control icon in the toolbox and then drag out a suitably sized rectangle on the form. Set the row and col properties to appropriate values (number of months, number of expense categories).

2. Make the first column fixed and label its cells with the names of the twelve months of the year. The first row should also be fixed, however, the labels across the top of the grid will be for home expense categories (e.g. ‘Gas’, ‘Electricity’, ‘Rent’, ‘Phone’, ‘Cable TV’, ‘Transport’, etc).

   Note: like arrays VB grid cell addresses start at 0. So ‘Janurary’ will go in column 0, row 1, and ‘Gas’ will go in column 1, row 0.

3. Centralise the expense headings and right align the unfixed cells below so that the units columns match. Look up the online help on ColAlignment() for unfixed cells, and FixedAlignment() for fixed cells.

4. Change column widths were necessary to achieve an effective presentation (no truncated labels or data).

   Syntax: Grid.ColWidth(column) = width
   Example: grdExpenses.ColWidth(1) = 1500
   
   

5. Enter expenses into the grid. Remember before entering data into any cell you must tell VB which cell you want to alter. Use the Row and Col properties at run-time to do this:

     grdExpenses.Row = 1
     grdExpenses.Col = 1
     grdExpenses.Text = "50.99"
   

   The above code would place the text ‘50.99’ into second column, second row, which represents Gas expenses for January.

   Note: Like combo boxes and list boxes, the best place to put the above code is probably the ‘Form_Load’ event.

6. Add a new row to the bottom of the grid to represent totals. Label column 0 ‘Totals’ and then use some sort of repeating structure (at run-time!) to go through all cells in each column placing the total in the cells of the newly added row. This totals row should then equal the entire Gas expenditure for the year, the entire Electricity expenditure for the year, and so on.

   Note: even though the grid displays numbers, the data is actually stored as text (strings). To add two strings together as if they were numbers use the function Val().

Download Grid Control example

Tutorial 9

Menu

Tutorial 11