Grid Works home page




Additional Information
Grid Options
HTML Reference
Tips & Tricks

Report a bug with this manual

How do you rate this manual?


Best viewed with
Microsoft Internet Explorer
Grid Works Tips & Tricks

1. Using bitmaps in cells
2. Easy formatting with HTML
3. Creating hotspots in a cell
4. Shading a grid
5. Extending column lines
6. OnBeforeDraw
7. Moving columns and rows
8. Locking cells
9. Hiding rows and columns
10. Using custom editors

Watch this space, more tips are coming soon, including drag & drop techniques, automatically stretching columns and rows and cell spanning.

Have a tip you wish to share with others? Please email your tip to and we will add it to this page along with due credit to yourself as author.

1. Using bitmaps in cells

Left aligned bitmap There are a number of ways to display bitmaps in cells.

Perhaps the easiest way is by using the TgwCell bitmap properties, Bitmap, BitmapHorizontalAlignment, BitmapVerticalAlignment, BitmapStretch and BitmapTransparency.

Example The effect shown above was achieved as follows
(NB: There was a TImage on the form called TickBitmap)
Grid.Cell[1,1].Bitmap := TickBitmap;
Grid.Cell[1,1].Text := 'Job Completed';

2. Easy formatting with HTML

Easy formatting with HTML The HTML capabilities of Grid Works make it easy to format the contents of a cell.

For more information on the supported HTML commands see the HTML Reference

For total formatting flexibility you can use the owner draw capabilities of Grid Works.

Example The formatting shown above was achieved as follows
(NB: There was a TImage on the form called BellBitmap)
Grid.Cell[1,1].Text := '<IMG IMAGE=BellBitmap>
 2pm - Call <B>Matthew</B>
 on <A 0299557778>(02) 9955-7778</A>
 <B><FONT COLOR="#FF0000">Urgent</FONT></B>';

3. Creating hotspots in a cell

Multiple clickable hotspots (or anchors) can be easily created in each cell by using the HTML anchor command.

These hotspots will generate the OnAnchorClicked event when clicked.

For more information see the HTML Reference

4. Shading a grid

A grid with shading You can easily color alternate rows of a grid by using the Shading option.

Simply set TgwGrid.Options.Shading.Color to the desired color and TgwGrid.Options.Shading.Frequency to the desired frequency (e.g. 1 to shade alternate rows)

Example To display every other row with a yellow background
Grid.Options.Shading.Frequency := 1;
Grid.Options.Shading.Color := clYellow;

5. Extending column lines

A grid with extended columns Column lines can be extend to the bottom of the grid's client area by using the Appearance.ExtendColumn option.

In the grid on the right notice how the column lines have been extended to the bottom edge of the grid even though there are only 5 rows in the grid. The standard Delphi grid only displays column lines as far as the last row.

Row lines may also be extending using the Appearance.ExtendRow property.

Example Extending column lines
Grid.Options.Appearance.ExtendColumns := true

6. OnBeforeDraw

The OnBeforeDraw event provides an opportunity to change the properties of a cell just before the cell is drawn.

This technique is particularly useful in components which are based on Grid Works (such as Calendar Works) because it provides an easy way to customize the appearance of a cell.

Example Display cell[1,1] with a red background

procedure TgwGrid1.OnBeforeDraw(Sender : TObject; Cell : TCell);
   if (Cell.Row.Index = 1) and (Cell.Column.Index = 1) then
      Cell.Color := clRed;

7. Moving columns and rows

Grid Works features row and column moving, as well as the ability to disable row and column moving for specific rows or columns.

At run time, columns and rows can be moved programmatically by setting their Index property.

Example Enabling column moving
gwGrid.Options.ColumnMoving := true;

Example Disabling moving for the first column
gwGrid.Column[0].Moving := false;

Example Move the first column (column[0]) so that it becomes the third column in the grid (column[2])
gwGrid.Column[0].Index := 2;

8. Locking cells

You can prevent the user from selecting a given cell by locking it.

Locking a cell does not change it's appearance. You might want to make your locked cells appear disabled by setting their color to clGray

Example Lock cell[1,1]
gwGrid1.Cell[1,1].Locked := true;

9. Hiding rows and columns

Rows and columns can be hidden by setting their Visible property to false.

Setting the height of a row, or width of a column to 0 is not the same as setting Visible to false, since an invisible row or column can not be manually resized or selected by the user whereas a row or column with a height/width of 0 can be resized or selected.

Example Hide the first row
gwGrid.Row[0].Visible := false;

10. Using custom editors

For total editing flexibility GridWorks allows you to use your own inplace editors.

To do this attach your editor to the appropriate column using the TColumn.CustomEditor property and set TColumn.EditorStyle to esCustom.

Use the OnLoadEditor event to fill the editor with the contents of the current cell, and the OnSaveEditor to fill the current cell with the contents of the editor.

Example Attaching an editor to a column
gwGrid1.Column[0].EditorStyle := esCustom;
gwGrid1.Column[0].CustomEditor := Memo1;

Example Loading editor data
procedure TForm1.gwGrid1OnLoadEditor(Sender : TObject)
   Memo1.Text := gwGrid1.Cell[gwGrid1.ColumnIndex, gwGrid1.RowIndex].Text;

Example Saving editor data
procedure TForm1.gwGrid1OnSaveEditor(Sender : TObject)
   gwGrid1.Cell[gwGrid1.ColumnIndex, gwGrid1.RowIndex].Text := Memo1.Text;

Copyright © 1998-2007 Innova Software ALL RIGHTS RESERVED
All trademarks are the property of their respective owners.