In this tutorial, you will learn how to bind True DBInput controls to a True DBGrid Pro 8.0 grid and to a Visual Basic Data control to create a fully functional database browser without writing a single line of code. This tutorial utilizes the ExternalEditor property of the True DBGrid Pro 8.0.
-
Start with Tutorial 16 - Binding True DBInput to a Data Control.
-
From the Visual Basic Project menu, select Components, then check the box labeled ComponentOne True DBGrid Pro 8.0. Click OK to add the TDBGrid (and TDBDropDown) control icons to the toolbox. The TDBGrid icon looks like this:
-
Place a True DBGrid control (TDBGrid1) on the form (Form1) as shown in the following figure.
-
Set the DataSource property of TDBGrid1 to Data1.
-
Set the AllowAddNew and AllowDelete properties of TDBGrid1 to True (note that the default value of AllowUpdate is True).
Configuring the grid at design time
We shall configure the grid using its context menus and property pages. For more details, see Design Time Interaction in the True DBGrid Pro 8.0 documentation.
-
Right-click the grid to display its context menu.
-
Choose Edit from the context menu. The grid will enter its visual editing mode, enabling you to interactively change the grid's row and column layout.
-
By default, the grid contains two columns. We are going to create eight more. Right-click anywhere in the grid to display the visual editing menu. Choose the Append command to add a new column at the end of the grid. Execute this command eight more times to create eight more columns. A total of ten columns are now in the grid.
-
Right-click again to display the visual editing menu. This time choose Properties to display the Property Pages dialog box. Select the Columns property page by clicking the Columns tab. The tree node Columns(00) is selected. Double-click the selection or click the + to the left of Columns(00). The tree will expand to reveal the available properties for the first column. Click the DataField property to reveal a list of all the fields in the table. Choose EmpID (the first item) from the list. The Caption property will default to the same name. Select the Caption property, and then type EmpIoyee ID into the text box on the right side of the page. Keep the default values for the other properties.
-
Repeat the previous step with the remaining nine columns. Columns(01): DataField = LastName, Click the ExternalEditor property to reveal a list of all the available controls in the form. Choose TDBText (the first item) from the list. Keep the default values for the other properties; Column(02): DataField = FirstName; Columns(03): DataField = SSN; Column(04): DataField = Phone; Columns(05): DataField = HireDate; Column(06): DataField = WorkDate; Columns(07): DataField = StartTime; Column(08): DataField = QuitTime; Columns(09): DataField = Tips.
-
After configuring the ten columns, click the OK button at the bottom of the Property Pages dialog box to accept the changes.
-
Note that you are still in the grid's visual editing mode. Place the mouse cursor over the column dividers within the column header area. It will turn into a horizontal double-arrow cursor, indicating that column resizing can now occur. Drag the dividers (use the horizontal scroll bar to bring a column into view if necessary) so that the grid looks like the one in the following figure.
Notice that there is a gray area between the rightmost column (Tips) and the right edge of the grid. We can eliminate this gray area by setting the ExtendRightColumn property to True.
-
Open the Property Pages dialog box again as in step 9. This time, select the Splits property page by clicking the Splits tab. Expand the Splits(00) object and double-click the ExtendRightColumn node to toggle its value. Accept the change by clicking the Apply button, which is used to commit changes without closing the dialog box. The rightmost column is now extended to the right edge of the grid, which now looks like this (move the Property Pages dialog box to observe if necessary).
By default, the grid has one split. Although you have not created any additional splits, you are still working with the properties of the default split. The ExtendRightColumn property is on the Splits property page because each split in the grid can have a different value for this property. Properties such as this are referred to as split-specific properties.
-
Scroll down to the MarqueeStyle property and select 2 - Highlight Cell. For more information on this property, see Highlighting the Current Row or Cell in the True DBGrid 8.0 documentation.
-
Click the OK button at the bottom of the Property Pages dialog box to accept the changes.
Run the program and observe the following:
-
Click on the grid cells will place the input controls directly in the cell.
-
Captions for the input control are displayed in the cell.
-
This is done without writing a single line of code.
To end the program, press the End button on the Visual Basic toolbar.
This concludes Tutorial 19.
Congratulations, you have successfully completed all 19 tutorials!