The intersection of a column and a row is called a cell:

The cell is the most important entity and the most used aspect of a grid. The cells hold the actual values of a grid. The cells of a grid can be used to display data or they can be used to receive data from the user. This means that data of a grid is entered or stored in cells.

Because the role of a grid is not defined by any standard, the most top cell of each column can be used to display a label. In fact, a column specifies a category of value. Therefore, the label of a column signifies the category of values of that column:

To create a series of values for each category, you use a row of data. A row is also called a record. To make a record explicit, the most left row can display a label. The easiest and most basic label consists of a number. For example, rows can be labeled from top to bottom as 1, 2, 3, 4, etc:

In most cases, each cell is in fact an edit control and its content is a UnicodeString. This means that a cell can contain a natural number, a floating-point variable, or a string.

1. Start Embarcadero RAD Studio
2. To create a new project, on the main menu, click File -> New -> VCL Forms Application - C++Builder
3. In the Object Inspector, change the properties of the form as follows:
   Caption: Depreciation Evaluation
   Name: frmDepreciation
   Position: poScreenCenter
   ShowHint: True
4. In the Standard section of the Tool Palette, click the TPanel icon and click the form
5. In the Object Inspector, set the panel's Align property to alTop
6. In the Win32 section of the Tool Palette, click the TStatusBar icon and click the empty area of the form
7. In the Additional section of the Tool Palette, click the TCategoryPanelGroup icon and click the middle empty area of the form
8. Right-click the category panel group and click New Panel
9. Right-click the category panel group and click New Panel
10. Right-click the category panel group and click New Panel
11. Complete the design of the form as follows:
     

    Control Align Alignment Caption Name Text TPanel alTop   Delete     TLabel     &Original Item Price:     TEdit   taRightJustify   edtCost 0.00 TLabel     &Salvage:     TEdit   taRightJustify   edtSalvage 0.00 TLabel     Estimated &Life:     TEdit   taRightJustify   edtLife 0 TButton     &Evaluate btnEvaluate   TCategoryPanelGroup alClient         CategoryPanel       Double Declining Balance     CategoryPanel       Straight-Line Method     CategoryPanel       Sum of the Years Digit     TStatusBar alBottom

To create a grid of data, the Visual Component Library (VCL) provides various controls based on classes. Those classes are defined in the Grids.hpp library. The fundamental class that supports grids in the VCL is named TCustomGrid but its main job is to lay a foundation for derived classes. The TCustomGrid class is derived from TCustomControl, which itself is based on TWinControl. The TCustomGrid class has the TCustomDrawGrid abstract class as its child. Below the TCustomDrawGrid class is a derived class named TDrawGrid. This is the first class that implements a grid control.

To visually create a grid, from the Additional section of the Tool Palette, you can click TDrawGrid and click a form. A draw grid can be used for all types of values, including graphics, etc. If you want a grid that holds regular values, the VCL provides a class named TStringGrid. The TStringGrid is (directly) derived from TDrawGrid. To visually create a string grid, in the Additional section of the Tool Palette click the TStringGrid button and click the form.

To programmatically create a string grid control, declare a pointer to TStringGrid class using the new operator. Use its default constructor to specify the container of the control as parent. Here is an example:

//---------------------------------------------------------------------------
#include <vcl.h>
#include <Grids.hpp>
#pragma hdrstop
#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
}
//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
    TStringGrid *StatRates = new TStringGrid(this);
    StatRates->Parent = this;
}
//---------------------------------------------------------------------------

After creating the control, you can set its properties to the values of your choice. After using the control, you can get rid of it using the delete operator, or you can trust its parent to do it for you.

As a descendant of TWinControl, the TStringGrid class inherits all the usual characteristics and events common to Windows control. It fires the OnClick event when the user clicks anywhere on the control. It sends an OnDblClick event when the user double-clicks any cell. It uses all mouse events (OnMouseDown, OnMouseMove, OnMouseUp, OnMouseWheelDown, and OnMouseWheelUp) as well as keyboard events (OnKeyDown, OnKeyPress, and OnKeyUp). Besides the regular control events, the string grid fires events that are proper to its functionality.

1. In the Tool Palette, click Additional
2. Click the TStringGrid icon
3. On the form, click under the Double Declining Balance bar
4. While the string grid control is still selected, in the Object Inspector, click Name and type grdDoubleDecliningBalance
5. In the Additional section of the Tool Palette, click the TStringGrid icon
6. On the form, click under the Straight-Line Method bar
7. While the string grid control is still selected, in the Object Inspector, click Name and type grdStraightLineMethod
8. In the Additional section of the Tool Palette, click the TStringGrid icon
9. On the form, click under the Sum of the Years Digit bar
10. While the string grid control is still selected, in the Object Inspector, click Name and type grdSumOfYears

Like many other controls, a grid is represented with a 3-D effect that raises its borders. This effect is controlled by the BorderStyle property of the TCustomGrid class:

__property Forms::TFormBorderStyle BorderStyle = {read=FBorderStyle,write=SetBorderStyle};

If you do not want to display borders on the control, set the BorderStyle property to bsNone:

A grid is made of vertical divisions called columns and horizontal divisions called rows. Two of the most visual characteristics of a string grid are its number of columns and its number of rows. These two
values are set using the ColCount and the RowCount properties. The values are integer types and should be >= 0. If you set either property to a negative value, it would be set to 1. If you do not want to display columns, set the ColCount to 0. In the same way, if you do not want to display rows, set the RowCount value to 0.

1. On the form, click the string grid control in the Double Declining Balance section
2. In the Tool Palette, click ColCount
3. Type 4 and press Enter
4. On the form, click the string grid in the Straight Line Method section
5. Press and hold Shift
6. Click the string grid in the Sum of the Years Digit section
7. Release Shift
8. In the Tool Palette, click ColCount
9. Type 4 and press Enter

By default, if a grid contains more columns than its width can show, it would display a vertical scroll bar. In the same way, if there are more rows than the control's height can accommodate, it would be equipped with a horizontal scroll bar. The ability to display scroll bars is controlled by the ScrollBars property. You can use it to display only the vertical scroll bar (ssVertical), only the horizontal scroll bar (ssHorizontal), both scroll bars (ssBoth), or no scroll bar (ssNone) at all.

Like most other list-based controls, a grid is used to display data and, in some applications, you may want the users to enter or use values of the grid control. To guide the users with the values in the grid, you can display explicit text in the fixed columns and fixed rows. The top and left cells are qualified as fixed and, by default, they are the most top and the left cells respectively. Besides these ranges of cells, you can add a fixed row of cells and a fixed column of rows.

If you want to display only one fixed row, it must be the most top range. This characteristic is controlled by the FixedRows property and, by default, is set to 1. If you want to display an additional range of fixed cells on top, change the value of FixedRows. In the same way, the number of fixed columns on the left side of the object is controlled by the FixedCols property. Setting either of these values to 0 would hide the fixed
column or row:

FixedCols=1; FixedRows=1	FixedCols=0; FixedRows=0
FixedCols=1; FixedRows=0	FixedCols=0; FixedRows=1
FixedCols=2; FixedRows=1	FixedCols=1; FixedRows=2

In the same way, you can decide how many columns and how rows to fix.

As mentioned already, the intersection of a column and a row is called a cell. To distinguish cells that hold indicative values and those that hold usable or modifiable values, cells are divided in two categories distinguished by two colors. The cells on the top section and those on the left, when displaying a different color than the cells in the middle-center section of the control, are called fixed cells.

To guide the user with the values on the grid, the cells on top and those on the left display the same color as the form, known in the Control Panel as the Button Color. The cells that display usable and modifiable values have a background color known in Control Panel as Window Color. To visually change the background color of cells that display values, use the Color property of the Object Inspector. Here is a grid with the clSkyBlue color:

You can also change these colors programmatically. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
    TStringGrid *StatRates = new TStringGrid(this);
    StatRates->Parent = this;
    
    StatRates->Color = TColor(RGB(255, 230, 204));
}
//---------------------------------------------------------------------------

To change the colors of the fixed columns and rows, change the color value of the FixedColor property of the TCustomGrid class:

__property Graphics::TColor FixedColor = {read=FFixedColor,write=SetFixedColor};

Here is a grid with the clNavy FixedColor:

You can also change these colors programmatically. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
    TStringGrid *StatRates = new TStringGrid(this);
    StatRates->Parent = this;
    StatRates->Color = TColor(RGB(255, 230, 204));
    
    StatRates->FixedColor = TColor(RGB(255, 128, 0));
}
//---------------------------------------------------------------------------

To distinguish cells, they are separated by vertical and horizontal lines known as grid lines. By default, the grid lines have a width of 1 integer. To display a wider line, change the value of the GridLineWidth. A reasonable value should be less than 10. If you do not want to display grid lines, set the GridLineWidth property to 0.

In order to access all of the cells that are part of a column, you should know the column’s index number. The most left column, which is sometimes the fixed column, unless the FixedCols value is set to 0, has an index of 0. The second column from left has an index of 1, etc. In the same way, rows are presented by an index. The most top row has an index of 0; the second row from top has an index of 1, etc.

By default, all columns have a width of 64 pixels. At design or run time, you can control this by changing the value of the DefaultColWidth property. If you want to control the widths of individual columns, at run time, call the ColWidths property:

__property int ColWidths = {read=GetColWidths,write=SetColWidths};

Specify the index of the column you need. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
    StringGrid1->Color = TColor(RGB(255, 230, 204));
    StringGrid1->FixedColor = TColor(RGB(255, 128, 0));
    StringGrid1->ColWidths[2] = 48;
    StringGrid1->ColWidths[3] = 22;
    StringGrid1->ColWidths[4] = 96;
}
//---------------------------------------------------------------------------

By default, all rows have a height of 24 pixels. At design or run time, you can control this by changing the value of the DefaultRowHeight property of the TCustomGrid class:

__property int DefaultColWidth = {read=FDefaultColWidth,write=SetDefaultColWidth};

If you want to control the height of individual rows, at run time, call the ColHeights property and specify the index of the row you want access to. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
    StringGrid1->Color = TColor(RGB(255, 230, 204));
    StringGrid1->FixedColor = TColor(RGB(255, 128, 0));
    StringGrid1->ColWidths[2] = 48;
    StringGrid1->ColWidths[3] = 22;
    StringGrid1->ColWidths[4] = 96;
    StringGrid1->RowHeights[1] = 18;
    StringGrid1->RowHeights[2] = 40;
    StringGrid1->RowHeights[3] = 12;
}
//---------------------------------------------------------------------------

In order to display cells with their default control appearance, the DefaultDrawing property must be set to true, which is the default:

__property bool DefaultDrawing = {read=FDefaultDrawing,write=FDefaultDrawing};

If you want to further customize the appearance of cells, you may have to draw them at run time. In this case, you would set the DefaultDrawing value to false.

The columns of the grid are stored in a collection or array called Cols. This property is a member of the TStringGrid class:

__property Classes::TStrings * Cols = {read=GetCols,write=SetCols};

By specifying the index of a column, you can change the label of the column header. In the same way, the rows are grouped in a collection called Rows, also a member of the TStringGrid class:

__property Classes::TStrings * Rows = {read=GetRows,write=SetRows};

This allows you to change the text of a row header based on its index. The cells of a grid are stored in a two-dimensional array called Cells, which is a member of the TStringGrid class:

__property System::UnicodeString Cells = {read=GetCells,write=SetCells};

A grid provides options that allow you to customize the behavior of the string grid. For example, you may want to allow the user to move the position of a column, to be able to put values in cells, to change the existing values in cells, etc. To support options, the TCustomGrid class provides its children with the Options property that is of type TGridOption:

__property System::Set<Grids::TGridOption,0,17> Options = 
{
    read=FOptions,
    write=SetOptions
};

The TGridOption enumeration is defined as follows:

enum TGridOption{
	goFixedVertLine,
	goFixedHorzLine,
	goVertLine,
	goHorzLine,
	goRangeSelect,
	goDrawFocusSelected,
	goRowSizing,
	goColSizing,
	goRowMoving,
	goColMoving,
	goEditing,
	goTabs,
	goRowSelect,
	goAlwaysShowEditor,
	goThumbTracking,
	goFixedColClick,
	goFixedRowClick,
	goFixedHotTrack
};

The options are represented in the Object Inspector by a field named Option:

The members of the TGridOption appear self-explanatory. For example, if you want to allow the users to be able to move the columns, you can set the goColMoving option to true. If you want users to be able to move rows, set the goRowMoving option to true.

If you had allowed the user to move the columns, whenever a user has performed this operation, the string grid would fire the OnColumnMoved() event. Its syntax is:

void __fastcall TStringGrid(TObject* Sender, long FromIndex, long ToIndex);

This event is a good place to decide what to do, if there is anything to do, when the user has moved a column. In the same way, if you had allowed the user to move rows, the string grid sends an OnRowMoved event immediately after the user has moved a row.