%2*Demo #7:Demo 7: Using TrueGrid without a database
%1AdvDemo:5 TrueGrid Pro Features
%2*Demo #8:Demo 8: DropDown Editing Features
%2*Demo #9:Demo 9: Drag and Drop
%2ValList:About Value Lists
%3*Demo #10:Demo 10: Simple Value Lists
%3*Demo #11:Demo 11: Combo Box Value Lists
%3*Demo #12:Demo 12: Radio Button Value Lists
%3*Demo #13:Demo 13: Pictures in Value Lists
%2Splits:About Splits
%3*Demo #14:Demo 14: Simple Splits
%3*Demo #15:Demo 15: Locked at left
%3*Demo #16:Demo 16: Custom Splits
%3*Demo #17:Demo 17: Independent Splits
%2Colors:About Colors and Fonts
%3*Demo #18:Demo 18: Color and Font Properties
%3*Demo #19:Demo 19: Per-cell Colors/Fonts
%2*Demo #20:Demo 20: Column Summaries
%2*Demo #99:Demo 99: TrueChess (just for fun)
%1TechDemo:6 How the Demo Navigator works
# Using
This demo program has been designed to allow you to
(a) Read about TrueGrid's capabilities
(b) Experiment with working demos
(c) Peruse working TrueGrid source code
(d) Get started with development!
>> Using the NAVIGATOR
The main form is called the Navigator and consists of two "panes". The top pane shows the outline of all demo topics. Some of the topics are informational (those in bold and in italic) while others represent demos.
You can select an entry with the mouse, or use the keyboard arrows to navigate in the outline. When you are positioned on a demo, the "TryIt" button is enabled. You can run the demo by clicking "TryIt" or by double clicking on the name of the demo in the outline.
The bottom pane in the Navigator shows the text associated with the outline item you've selected. You can scroll through the information using the scrollbar. You can move between the outline pane and the text pane by using the Tab key.
>> Running the demos
When you are positioned to a demo in the outline, the text pane shows a brief introductory description of the demo.
When you run the demo, the text pane changes to a complete discussion about the demo's features and how it was implemented. The demo discussion text will appear in blue to differentiate it from the quick introductory text.
>> Examining the demos
Each demo is numbered. The demo number appears in the outline, and on the title bar of the running demo. For each numbered demo there is a form called TGDEMOXX.FRM, where XX is the number of the demo. This makes it easy to find the code associated with a particular demo.
The demos are completely self-contained and contain only the code relevant to the feature being shown. Each demo has a single line of code in the Form_Unload which is used to integrate the form with the demo. Otherwise, you can take the demo forms and use them directly in other applications.
>> Using TRUEDEMO.VBX
This demo uses a special version of TrueGrid Pro called TRUEDEMO.VBX. This VBX will work ONLY AT DESIGN-TIME (you cannot compile your applications). In all other respects, the VBX is 100% functional. You can even try doing some developing using this VBX to see how you like TrueGrid. However, any demo grids you design will not work with an actual copy of the TrueGrid product once you receive it.
# StdDemo
These introductory demos show how easy it is to use TrueGrid to display and manage database (and other) data.
All of the demos in this section work in both the TrueGrid Standard Edition product and the TrueGrid Pro product.
Each demo is numbered, and the demo is self-contained within a form with the same number. So, you can look at the code for Demo 3 by examining the form TGDEMO3.FRM. Each "frame" contains introductory text telling you what the demo does. When you click "TryIt", the text will change to a complete explanation of the feature in the demo.
You should run these demos before moving on to the advanced demos for TrueGrid Pro features.
# AdvDemo
These demos show the advanced features of TrueGrid Pro. All of the demos in this section work only in the TrueGrid Professional Edition product.
Each demo is numbered, and the demo is self-contained within a form with the same number. So, you can look at the code for Demo 10 by examining the form TGDEMO10.FRM. Each "frame" contains introductory text telling you what the demo does. When you click "TryIt", the text will change to a complete explanation of the feature in the demo.
# ValList
TrueGrid has a powerful feature called "Value Lists". Value lists are used to associate a set of values with a particular column. Value lists can be the names of valid states, departments, status codes, or any other list of values which are possible for a column.
These demos show how value lists can be used for a variety of purposes. Value lists can be used for simple input validation, or can be used to automatically "drop-down" a combo box containing possible values. Value lists can also be used to "remap" data values into their corresponding displayed values, and even to define pictures which represent particular column values.
The important thing about value lists is that TrueGrid manages them automatically, all you do is define the list of values for a column.
# Splits
If you use Excel or Microsoft Word for Windows, you may already be familiar with the idea of splits. A "split" refers to the ability to divide a displayed document into "views", showing you the same data but at a different horizontal or vertical position.
TrueGrid manages splits automatically, and provides a powerful set of features for using splits in your applications. Interactive splits (those which you allow users to use and configure) are controlled using small black "split boxes" which appear adjacent to the horizontal scrollbar at the bottom of the grid.
Using TrueGrid, users may split the grid any number of times to create stationary columns, then scroll other splits to bring hidden columns into view. In your applications, splits can be locked so they appear to be "panels" of data on the display.
To make things even easier, TrueGrid makes it easy to specify that one or more columns should be "locked at left" at design-time. The TrueGrid design-time layout editor automatically sets up the splits to achieve this effect.
These demos show many of the split features. By looking at the demo forms themselves, you can find out what is needed to set up the split features, and can experiment with them yourself.
# Colors
TrueGrid contains complete support for colors and fonts on a per-column, per-grid, and per-cell basis. These demos show how TrueGrid's color and font properties can be used to create effective grid interfaces.
TrueGrid has four types of color and font support:
1. Properties such as ForeColor, BackColor, HeadForeColor, SelectedForeColor, etc. allow you to associate colors and fonts with specific aspects of the grid at design time.
2. "Pattern matching" properties, such as ColumnAddRegexAttr, allow you to tell TrueGrid to automatically apply colors and fonts to cells based upon text patterns in the cell. This is a very flexible technique which is totally automatic once configured.
3. "Cell status" properties allow you to pre-configure TrueGrid to apply colors and fonts to cells which have a certain status. Status can be "current cell", "selected cell", "updated cell", etc. These properties make it possible to change TrueGrid's default colors and fonts for standard cell highlighting.
4. A special event, FetchAttributes, allows you to decide what cell colors should be used dynamically as cells are displayed. This is the most flexible technique, allowing you to make cells, rows, and columns have any attributes you want based upon virtually any critieria you choose.
The following demos show how some of these properties can be combined.
# TechDemo
If you're adventurous, you may be interested in how the demo navigator works.
The demo navigator is somewhat more complicated than the included demos, mainly because it isn't really intended as a demo at all.
However, it does perform some tasks which are not shown elsewhere.
>> Features of interest:
The navigator uses TrueGrid's outlining features to control the outline indent level in the outline grid. A special event, FetchMargins, allows you to change the indent level used on a per-cell basis. The navigator code stores the indent level when it reads the outline information from the tgdemo.txt file, then controls the outline indentation in FetchMargins.
The fonts and highlighting in the demo outline are controlled using the SetStatusAttr command, which specifies how the current cell looks.
We leave it up to you to explore the code in the navigator. We've tried to comment it well so you can understand what's happening.
# Intro
Welcome to the TrueGrid Pro demonstration package.
You are in the NAVIGATOR, which allows you to read about TrueGrid features, browse through the various demos, and execute them by pressing the "TryIt" button when it is enabled. The top pane shows and outline of topics and demos. The bottom pane shows you the text associated with each topic. You can scroll through the topic list or text pane by using the appropriate scrollbar. You can also resize the NAVIGATOR window so you can see more or less text.
Read this introduction first, then choose the topics you are interested in.
-----
TrueGrid is a bound database browser grid for Visual Basic 3.0 Data Access. It is remarkably easy to use, extremely capable, and priced sensibly. Our goal in designing TrueGrid was to provide you with high performance, high productivity, and good value.
TrueGrid is available in two versions: TrueGrid Standard Edition, and TrueGrid Professional Edition. This demo shows the features of both. The first set of demos ("Introductory Demos") shows features common to both. The second set of demos ("TrueGrid Pro Demos") shows features available only in the professional edition.
For information about specific product features, pricing, and ordering information, see the topic entitled "TrueGrid Product Information".
# ProdInfo
These three sections provide detailed information about TrueGrid features, pricing, and about Apex software and how to reach us.
You can review this information before or after running the demos. For the most part, the demos show most of the important features and explains them as well.
# PIApex
Apex Software Corporation was founded in 1988 and has specialized in database software and tools. Our first product was FrontRunner, a pop-up dBASE programming environment for DOS, introduced in 1988. Since then, Apex has released a variety of database products, including ADL (a dBASE database library), Agility (an innovative database package for Visual Basic and Visual C++), as well as TrueGrid.
You can reach us:
1-800-858-APEX (orders)
1-412-681-4738 (support)
1-412-681-4343 (other calls)
1-412-681-4384 (FAX)
E-mail addresses:
CompuServe: 71053,1062
Internet: truegrid@apexsc.com
Mailing address:
Apex Software Corporation
4516 Henry Streety
Pittsburgh, PA 15213
# PIFeatures
TrueGrid is available in both a Standard Edition for simpler database applications and a full featured TrueGrid Pro version.
>> Features common to both TrueGrid products:
1. Drop-and-go behavior. Drop the grid on the form and setting DataSource are all you need to do to have a working, editable, data grid.
2. Responds to changes you make to the Data control or Dynaset using a deferred response scheme. So, if your program does a MoveNext 10 times, the grid will respond only once by moving the highlighted row. This makes programming effortless, since the grid worries about efficiency and all you worry about is you program.
3. Updatable. Records can be changed in the grid and are updated automatically to the database.
4. Handles databases of any size. No memory overhead for large tables.
5. Responds to database movement, queries, FindFirst, Refresh, UpdateData, UpdateControls, RecordSet changes via SQL, etc. In other words, everything you do will be reflected in the grid.
6. Automatic per-column edit masks using Format$ strings.
7. Column layout can be set up at design time, using the Layout Editor, or will automatically be derived at runtime.
8. Column properties for fieldname, heading, data size, column width, editability, justification, edit mask.
9. Per-column validation routines.
10. Works with all database formats supported by VB3.
>> Additional features for TrueGrid Pro:
1. Customizable color schemes, 3D appearance, row highlighting styles.
2. Individual column control including unbinding, calculating, locking capabilities.
3. Ability to set color and font style on a per column, or cell basis.
4. Use conditions to determine individual cell appearance.
5. Display data using multi-line rows and edit drop downs.
6. Create multiple Excel-like splits.
7. Built-in value lists allow you to create coded fields which are automatically translated into their displayed values by TrueGrid.
8. Enhanced layout editor allows control over locked columns, splits, fonts, justification, and column calculated expressions.
9. Enhanced runtime properties for accessing cell locations, displaying your own controls within cells, and for drag-and-drop implementations.
10. Automatic column summing capabilities.
12. Multiple layouts allow you to instantly switch between various column and split configurations.
13. Built-in drop-down combo box for value lists, and drop-down capability for lookups in other databases.
14. Radio buttons and checkboxes within cells.
# PIPricing
TrueGrid is available in two versions:
TrueGrid Standard Edition ($69 US)
Supports full featured database browsing and in-cell editing. Ideal for first-time grid users, home users, and small applications.
TrueGrid Professional ($149 US)
All the features of Truegrid Standard Edition, plus over 100 professional enhancements including calculated columns, splits, colors and fonts, column summaries, value lists, graphics in cells, and much more.
You can order TrueGrid directly from Apex by calling 1-800-858-APEX. If you mention the demo program, you can purchase TrueGrid Professional for only $99.95 US!
# *Demo #1
This demo shows how simple it is to use TrueGrid using all of the default settings. A form is displayed which shows the default TrueGrid, browsing a small customer database.
This demo contains no code whatsoever.
# *Demo #1X
This demo shows how simple it is to use TrueGrid using all of the default settings.
READ THIS FIRST, then click on the "Demo 1 - Simple TrueGrid" title to bring the demonstration form to the front so you can try it.
To create this demo, we did the following:
1. Put a data control on the form, and set it to the customer.dbf database.
2. Dropped a TrueGrid on the form and set the DataSource property.
>> Observe:
This demo contains no code.
You can edit data, move from record to record, and rearrange or resize columns using the mouse.
To edit, click on a cell to make it current, then click again to enter cell editing mode. You can also just begin typing and TrueGrid will enter edit mode automatically. When done, press the ENTER key. Note that the updated text will appear RED until you move the record pointer using the data control or by clicking on another row in the grid. That's when the actual update occurs.
Notice that the grid will "listen" to anything you do with the data control. Move the record pointer to the first record, the last record, or move forward or backward by one record at a time. The grid automatically senses what you do and there is absolutely no coding necessary.
# *Demo #2
This demo shows how well TrueGrid and other bound controls work together.
A grid, combined with three Visual Basic Text controls work togther to browse and update data. The grid properties have also been set to show the enhanced 3D appearance.
This demo contains no code whatsoever.
# *Demo #2X
This demo shows how well TrueGrid and other bound controls work together.
READ THIS FIRST, then click on the "Demo 2 - Multiple Controls" title to bring the demonstration form to the front so you can try it.
>> Observe:
This demo contains no code.
As you move the grid pointer by clicking on a cell, the text boxes automatically show the current row. If you edit data in the grid, then change the row number, the text boxes will show the edited data (when you make that row current again). Similarly, if you change data in a text box, then move the pointer, the grid automatically shows the updated data in the old row.
>> To create this demo, we did the following:
1. Put a data control on the form, and set it to the customer.dbf database.
2. Dropped a TrueGrid on the form and set the DataSource property.
3. Used the TrueGrid design-time layout editor to pre-configure the column layout and sizes for this demo.
4. Put three text boxes, linked to individual database fields via their DataSource and DataField properties.
5. Set TrueGrid properties HorzLines, HorzColor, VertLines, VertColor, BackColor and MarqueeStyle to enhance the grid appearance.
# *Demo #3
This demo shows how database actions taken by program code are automatically sensed by TrueGrid.
This is an enhanced version of Demo2 which contains buttons for Update, AddNew, Delete. It also contains buttons for First, Next, Previous, and Last. Although these duplicate the function of the data control, they demonstrate how methods like MoveFirst can be used to cause grid movement.
# *Demo #3X
This demo shows how database actions taken by program code are automatically sensed by TrueGrid.
READ THIS FIRST, then click on the "Demo 3 - Code Interaction" title to bring the demonstration form to the front so you can try it.
>> Observe:
This demo works like Demo2. You can move the grid pointer as well as update data in the grid or text controls.
The Update button will force an immediate update. For example, if you change a cell in the grid, but don't move to a new row, the edited cell changes color to let you know that the data was changed. If you click Update, it forces the grid (and other controls) to write their data to the database.
The Delete button deletes the record you are currently pointing to (don't delete too many ... this file is used by other demos).
The AddNew button will create a new, empty record at the bottom of the grid.
>> To create this demo, we did the following:
1. Put a data control on the form, and set it to the customer.dbf database.
2. Dropped a TrueGrid on the form and set the DataSource property.
3. Used the TrueGrid design-time layout editor to pre-configure the column layout and sizes for this demo.
4. Put three text boxes, linked to individual database fields via their DataSource and DataField properties.
5. Created seven buttons and put the proper code in each (1-3 lines per button).
6. Set TrueGrid properties HorzLines, HorzColor, VertLines, VertColor, BackColor and MarqueeStyle to enhance the grid appearance.
# *Demo #4
This demo shows how multiple records can be selected and highlighted using TrueGrid's BookmarkList feature. Records can be selected manually, or multiple records can be automatically selected by providing an expression.
This demonstration is somewhat more complicated and shows quite a few features.
# *Demo #4X
This demo shows how multiple records can be selected and highlighted using TrueGrid's BookmarkList feature.
READ THIS FIRST, then click on the "Demo 4 - Multiple Selection" title to bring the demonstration form to the front so you can try it.
>> Observe:
This demo highlights several features, but mainly serves to demonstrate how multiple row selection can be performed. Here are some things you may want to try:
1. Move the mouse to the leftmost edge of the grid ... a checkmark appears. You can click to select a row, or click to deselect one which is already selected.
2. The horizontal scroll bar allows you to move from one selected row to another. Select a few rows throughtout the database, then move from one to another using the scroll bar.
3. The "Clear All" button will deselect all of the selected rows.
4. At the bottom, the power of the grid's selection capability is illustrated by allowing an expression to be used to add items to the selection. Choose one of the expressions from the combo box (or type your own if you wish), then click "Execute" to select each of the rows which matches the criteria. The "Execute" button ADDS records to the selection, so click "Clear All" if you want to see only those which match.
Performing operations like those in this demo is very easy. The best way to find out is to explore the code in the Demo4 form.
>> Other tidbits
This demo actually JOINs 2 databases using an SQL select statement which appears in the Data Control RecordSource property. Although it's not really important to the selection capability, you may find this interesting anyway.
The Marquee has been changed to highlight only the current cell, while the selected rows are highlighted in blue. You may want to experiment with the SelectedBackColor, SelectedForeColor, and MarqueeStyle properties to see what other combinations are possible.
# *Demo #5
This demo shows how TrueGrid responds to various SQL queries.
A grid is displayed with an area to enter SQL statements. By creating queries, you can easily see how TrueGrid reconfigures itself to match the results of the query. Some interesting queries are provided so you can quickly experiment with the demo.
# *Demo #5X
This demo shows how TrueGrid responds to various SQL queries.
READ THIS FIRST, then click on the "Demo 5 - SQL" title to bring the demonstration form to the front so you can try it.
>> Observe:
At the bottom of the demo form, there is an "Execute" button with an area for editing SQL statements just to the right. At the very bottom, a drop-down provides some common SQL statements for you to try.
Notice that TrueGrid changes its column headings in order to satisfy the result of the SQL query. Even queries such as:
SELECT COUNT(*) FROM CUSTOMER
cause TrueGrid to display a single column which holds the result of the count. (If you aren't that familiar with SQL, the above query results in a count of the total number of records in the table.)
Try each of the sample queries to see how they operate. Then, if you wish, you may want to enter some SQL statements yourself to see how TrueGrid responds.
The code for this demo is quite simple. The SQL statement is simply assigned to the data control's RecordSource property, then the Refresh method is used on the data control. TrueGrid does the rest.
# *Demo #6
This demo links two grids together to show how related databases can displayed in multiple tables on a form.
A grid containing COMPOSERS is displayed, and another containing their COMPOSITIONS. When you select a composer, the second grid automatically responds by showing just those compositions which belong to the selected composer.
This demo contains only a few lines of code, and illustrates how simply TrueGrid events can be used to create sophisticated interfaces.
# *Demo #6X
This demo links two grids together to show how related databases can displayed in multiple tables on a form.
READ THIS FIRST, then click on the "Demo 6 - Linked Grids" title to bring the demonstration form to the front so you can try it.
>> Observe:
The form contains two TrueGrids and two data controls.
The top grid and data control are linked to the COMPOSER.DBF database file, which contains a list of composers.
The bottom grid and data control are linked to the OPUS.DBF database file, which contains a list of compositions for composers.
Each database has a last name field, called "LAST". When you click on a composer in the top grid, it automatically formulates an SQL query on the second data control. This causes the second grid to respond and show the proper compositions.
All of the code is in the RowChange event handler for the top grid, which looks like this:
lastname$ = Data1.Recordset("LAST")
Data2.RecordSource =
"SELECT * FROM OPUS WHERE LAST " +
chr$(34) + lastname$ + chr$(34)
Data2.Refresh
RowChange is triggered each time the first grid detects that a new row has become current, whether by clicking on the grid, or by moving the current position using the data control (or Visual Basic code). Thus, the list of compositions will always be kept current, no matter what is done to the first database.
Easy? We think so.
# *Demo #7
This demo shows how TrueGrid can be used independently of a database. Instead of automatically fetching data from a database, TrueGrid is configured so that the programmer provides the data to be displayed from any source they wish.
In the case of this demo, the grid is used to display a directory listing of the current directory, including file name, date, and file size.
# *Demo #7X
This demo shows how TrueGrid can be used independently of a database.
READ THIS FIRST, then click on the "Demo 7 - Non-database Mode" title to bring the demonstration form to the front so you can try it.
>> Observe:
TrueGrid contains a property, DataMode, which specifies whether or not TrueGrid is linked to a database, or whether it gets data in some application-defined way. This latter mode is called "Application" mode, or sometimes "Callback" mode. We like to call it "Callback" mode since TrueGrid "calls back" to the application each time it needs data.
This is different from the way other grids store data. Instead of storing the data for you, TrueGrid simply requests what it needs when it needs it. Thus, you can display millions or billions of lines of data if you have the data stored somewhere and can respond to TrueGrid's requests for fetching it.
In this demo application, a file directory listing is shown. The DataMode is set to "Application" and each time TrueGrid needs information it calls the Fetch event. In the Fetch event, file information is returned to TrueGrid, which it then displays.
Although programmers usually buy TrueGrid for its bound database capabilities, callback mode offers many advantages for displaying non-database data as well.
# *Demo #8
This demo shows several advanced features of TrueGrid, primarily the ability to "drop-down" another control (such as a combo box) so that field values may be more easily entered.
The grid displays a list of customer contacts, but only the customer code is available in the database. Another database, containing customers, is "popped-up" when you click on the customer code in the contact list.
# *Demo #8X
This demo shows several advanced features of TrueGrid, primarily the ability to "drop-down" another control (such as a combo box) so that field values may be more easily entered.
READ THIS FIRST, then click on the "Demo 8 - DropDown Editing" title to bring the demonstration form to the front so you can try it.
Features illustrated by this example include:
1. Drop-down for user code. Clicking on a cell in the "Code" column pops up a related database which shows the customer codes, with the customer name and company. The drop-down is actually another TrueGrid control which was created independently and is kept on the form with its Visible property set to FALSE. It is poppped up by the main grid in its RequestEdit event.
2. One key editing for "Call?" column. Pressing "Y" or "N" in the "Call?" column will change the value to "Yes" or "No" without entering edit mode. This is also done in RequestEdit.
3. Adding new records. Pressing down-arrow on the last row automatically creates an empty row for adding a new record. Moving off the record without filling it in cancels the add. This is done with one line of code in the Append event for the main grid.
4. Calculated columns. The secondary (pop-up) grid shows the user code and the name/company of the user. The database actually contains a first name, last name, and company field. A calculated column is used to show these as a single field. This was set up in the layout editor's "Column Properties Dialog" at design-time.
5. The caption of the data control indicates the current row number, or specifies that the grid is "Adding a new record...". This is handled by code in RowChange.
# *Demo #9
This demo shows how easy it is to create custom drag-and-drop interfaces using TrueGrid's DragCell event.
Two grids are used. One contains a list of contacts, and the other contains a list of pending calls. You can drag an entire contact, or just a phone number, and drop it in the appropriate place in the destination grid.
# *Demo #9X
This demo shows how easy it is to create custom drag-and-drop interfaces using TrueGrid's DragCell event.
READ THIS FIRST, then click on the "Demo 9 - Drag and Drop" title to bring the demonstration form to the front so you can try it.
The top grid is connected to the "Customers" table and includes a list of customers. The bottom grid is the "CallList" table, which accumulates calls to be made.
Actions you can perform:
1. You can pick up an entire customer by grabbing any column except the phone number. Dropping the customer into the bottom "CallList" grid will add a complete row to the call list.
2. You can pick up just the phone number from any customer and drop it into any of the existing phone number cells in the bottom grid.
In both cases, highlighting in the grids provides feedback so you know what is about to happen. You can cancel the operation by moving back to the top grid and releasing the mouse button.
Such drag-and-drop interfaces are easy to implement using TrueGrid's DragCell event. TrueGrid automatically determines that a drag is beginning, then notifies you about the cell location being dragged. Your code can respond as you wish by dragging the cell, or the entire row using Visual Basic's drag-and-drop features.
TrueGrid also contains special properties (such as RowAtPoint and ColumnAtPoint) so you can find out which cell the user is pointing to in the destination grid. Although these features are useful for drag-and-drop, they are also useful in a wide variety of other circumstances. For example, you could update a status bar to provide help information about the field the user is currently on top of.
# *Demo #10
This demo shows how pre-defined value lists can be used to translated "coded" database fields into more friendly text strings.
At design-time, a value list for the "Customer Type" column was defined that remaps values 1-5 to more meaningful values. TrueGrid handles the rest.
# *Demo #10X
This demo shows how pre-defined value lists can be used to translated "coded" database fields into more friendly text strings.
READ THIS FIRST, then click on the "Demo 10 - Simple Value Lists" title to bring the demonstration form to the front so you can try it.
The value list itself was defined at design-time (you can inspect this by looking at TGDEMO10.FRM in design-mode). Once defined, TrueGrid takes care of remapping the values 1 through 5 to text which describes the customer type. To the grid user, it appears as if the text, rather than the numeric value, is actually stored in the database.
You can change the type of a customer by typing a new text string directly into the first column. If the value you type isn't in the value list, TrueGrid will fire the ValidateError event, which (in this demo) displays a message box.
Two buttons at the bottom of the form allow you to tell TrueGrid to either use the value list (the default) or to show the raw numeric data in the file. Only two lines of code are used in each button to change the display mode for the
# *Demo #11
This demo shows how pre-defined value lists can be used to display an automatic combo drop-down which allows the user to select a value for a field.
At design-time, a value list for the "Customer Type" column was defined that remaps values 1-5 to more meaningful values. The value list type was set to "Combo Box", and TrueGrid automatically displays and manages the combo box when needed.
# *Demo #11X
This demo shows how pre-defined value lists can be used to display an automatic combo drop-down which allows the user to select a value for a field.
READ THIS FIRST, then click on the "Demo 11 - Combo Box Value Lists" title to bring the demonstration form to the front so you can try it.
This demo is identical to Demo #10, except that the value list style for Column 1 is set to "Combo Box" (at design-time), which tells TrueGrid to use a combo box presentation for the data in Column 1.
You can change the type of a customer by clicking on the "drop-down" button to display the combo, then clicking on a new customer type. TrueGrid also allows you to type the value directly into the cell, and will automatically validate the entry just as it does without the combo box.
Two buttons at the bottom of the form allow you to tell TrueGrid to either use the value list (the default) or to show the raw numeric data in the file. Only two lines of code are used in each button to change the display mode for the field. Notice that the combo drop-down works for both the translated value, and the actual database value.
# *Demo #12
This demo shows how pre-defined value lists can be used to display radio buttons in a cell.
At design-time, a value list for the "Customer Type" column was defined that remaps values 1-5 to more meaningful values. The value list type was set to "Radio Buttons", and TrueGrid automatically displays and manages the radio buttons within the cell.
# *Demo #12X
This demo shows how pre-defined value lists can be used to display radio buttons in a cell.
READ THIS FIRST, then click on the "Demo 12 - Radio Button Value Lists" title to bring the demonstration form to the front so you can try it.
This demo is almost idential to Demos 10 and 11, except that the value list style for Column 1 is set to "Radio Button" at design-time, which tells TrueGrid to display the values as a set of radio buttons.
You can change the customer type by either (a) clicking on one of the radio buttons, (b) cycling through the radio buttons by using the space bar, and (c) pressing the first letter of one of the radio button options. TrueGrid manages this interaction automatically.
As with the previous demos, the two buttons at the bottom of the form allow you to tell TrueGrid to either use the translated values (the default) or to show the raw numeric data in the file. Only two lines of code are used in each button to change the display mode for the column.
# *Demo #13
This demo uses value lists with an automatic picture translation table. Numeric field values are automatically displayed as pictures by TrueGrid.
At design-time, two columns have value lists defined which include picture translations. When fetching the data, TrueGrid translates the text or numeric data in the database into the corresponding picture. TrueGrid also permits the picture to be changed by clicking on it. One column uses this feature to simulate checkboxes for boolean values.
# *Demo #13X
This demo uses value lists with an automatic picture translation table. Numeric field values are automatically displayed as pictures by TrueGrid.
READ THIS FIRST, then click on the "Demo 13 - Pictures in Value Lists" title to bring the demonstration form to the front so you can try it.
The "How" column shows a picture to denote how a contact was made: by phone, mail, or in person. In the database, these values are represented by the numbers 0, 1, and 2. At design-time, the "Cycle on click" option tells TrueGrid to automatically cycle through the values when the cell is clicked, making a convenient 3-state button in the cell.
The "Recall?" column is a logical field which normally is displayed as "0" or "-1". By associating pictures of a checkbox and enabling "Cycle on click", this cell behaves just like a standard checkbox, allowing you to click on it to change the state.
This form contains no code, by the way. However, notice that you can still type directly into these cells. Normally, you would customize this behavior by controlling how keyboard edits work in the RequestEdit event.
# *Demo #14
This demo shows how simple interactive split capabilities can be enabled.
A TrueGrid control is displayed with default settings, except that splits have been enabled by setting the SplitLocked property to FALSE for the grid.
# *Demo #14X
This demo shows how simple interactive split capabilities can be enabled.
READ THIS FIRST, then click on the "Demo 14 - Simple Splits" title to bring the demonstration form to the front so you can try it.
Notice that the TrueGrid control has a small black "split box" at the lower left.
>> Create a new split:
Drag the split bar to the right with the mouse to "lock" the first column in place. Now, use the horizontal scrollbar on the right split to scroll through the available columns.
>> Customize one split:
You can rearrange and hide the columns in one split while leaving other splits intact. In the right split you just created, scroll back to the leftmost column and hide the "Code" column by dragging the vertical line to its right to the far left to "close-up" the column. Now the "Code" column appears only in the left split, but not in the right one.
>> Create more splits:
Adjust the existing split by dragging the black box (the one under the double vertical line) further to the right. Now, create another split using the "new split box" at the far left.
>> Remove splits:
You can remove either of the new splits by "closing" the split. Drag its split bar to the far right or far left to remove it.
This is a demonstration of the simplest way to use splits, where the user has complete control over the grid appearance. All of the split characteristics can be controlled from code as well, and you can easily disallow user modification of splits.
# *Demo #15
This demo shows how the automatic "locked at left" feature works.
At design-time, you can specify that certain columns are "locked at left" in order to fix them at the left of the grid. TrueGrid automatically configures the split properties for you.
# *Demo #15X
This demo shows how the automatic "locked at left" feature works.
READ THIS FIRST, then click on the "Demo 15 - Locked at left" title to bring the demonstration form to the front so you can try it.
One of the more popular uses of splits is to lock columns at the leftmost portion of the grid so that they do not scroll. To simplify this, the TrueGrid design-time layout editor has a "locked at left" checkbox for each column so you can tell TrueGrid to automatically set up the splits for you.
Notice that TrueGrid doesn't display a split box at the bottom, so the splits cannot be changed by the user. In addition, TrueGrid will automatically "track" the size of the locked columns if you adjust their size. Try adjusting the size of the "First" column by moving the vertical line to its right. The "locked split" area conforms to the column sizes automatically.
There is no code necessary to accomplish this ... TrueGrid does it all automatically.
# *Demo #16
Splits can be fully customized. This demo shows how setting some simple design-time properties can employ splits for special purposes.
A grid containing two fixed areas and a central splittable region is shown.
# *Demo #16X
Splits can be fully customized. This demo shows how setting some simple design-time properties can employ splits for special purposes.
READ THIS FIRST, then click on the "Demo 16 - Custom Splits" title to bring the demonstration form to the front so you can try it.
The grid contains three splits which were set-up at design-time in the layout editor:
Left split - this split has one column which is "unbound" and is used to show the current row number. It is also configured to be a "selection" column. The checkmark cursor which appears in that column allows you to select one or more rows. This split is "locked" so the user can't reconfigure it. It appears to be more like a panel than a split region.
Center split - this split contains the main data from the database. It is "unlocked", so notice that it has a split box of its own. You can split the center area again interactively. (This can be disabled, of course.)
Right split - this split contains just one of the columns from the database, with a value list. It is also a fixed split (like the left one) and cannot be removed or reconfigured by the user.
>> How it was done...
At design-time:
- SplitLocked was set to FALSE, enabling design-time split features.
- SplitPropsGlobal was set to FALSE, making each split have it's own set of properties.
Then, then layout editor was used to create the splits and configure the columns in each split.
After the splits were layed out, the SplitIndex property was used to "move" to each split and set its properties separately. The left and right splits were locked using SplitLocked and the left split was configured to allow checkmark selections.
# *Demo #17
This demo shows how two splits can be "unlinked" so that they scroll independently.
TrueGrid supports the notion of "split groups". Any number of splits can be grouped for independent vertical scrolling. This makes it easy to view different parts of the database using the same grid control.
# *Demo #17X
This demo shows how two splits can be "unlinked" so that they scroll independently.
READ THIS FIRST, then click on the "Demo 17 - Independent Splits" title to bring the demonstration form to the front so you can try it.
The form contains a single TrueGrid control with two pre-defined splits. Notice that each split has its own vertical scrollbar.
Using the vertical scrollbars, you can see how each split can be moved to an independent location within the database.
When you click on a row, TrueGrid selects the row in both splits so both are visible, although they may not be aligned with one another.
>> How it was done ...
A TrueGrid control was placed on the form and pre-configured to have two splits. With SplitPropsGlobal set to FALSE, the SplitGroup number of the left split was set to 1 and the SplitGroup number of the right split was set to 2. TrueGrid automatically shows multiple vertical scrollbars when splits are unlinked in this fashion, although you can change this default behavior if you wish with the VertScrollbar property.
# *Demo #18
This demonstrates how simple properties for changing column and grid colors can be used for different effects.
TrueGrid has a variety of properties which can change various color attributes of the entire grid or of individual columns.
# *Demo #18X
This demonstrates how simple properties for changing column and grid colors can be used for different effects.
READ THIS FIRST, then click on the "Demo 18 - Color and Font Properties" title to bring the demonstration form to the front so you can try it.
The form contains a TrueGrid control which display several of the simpler features available for setting colors and fonts:
- Column colors can be set by changing a single property. The 'Company', 'Contacted', and 'UserCode' columns were set up in this way.
- Column fonts can be set as well, as in the 'UserCode' column.
- Each split has its own settings for colors and fonts. Notice that the color of the horizontal lines is different for the "fixed" split on the left.
- The heading font can be changed as well, and can be set on a per-split, or per-column basis.
All of these settings are dynamic and can be changed at runtime to achieve any desired effect.
If you use the split bar to creaete a new split, you will notice that TrueGrid automatically causes color and font settings to be inherited by the newly created split.
>> How it was done...
A TrueGrid control was bound to the database. The SplitPropsGlobal property was set to False so that settings could be applied independently for each split.
In the layout editor, the fixed column was created. The font weight for 'UserCode' was set at design time, as were the fonts used for the headings.
At runtime, Form_Load was modified to contain settings for ColumnForeColor and ColumnBackColor properties. These were changed to set the colors for the 'UserCode', 'Company', and 'Contacted' columns.
# *Demo #19
This is a very practical example of how per-cell colors and fonts can be used to convey relationships between data.
A corporate task list is shown. Colors and fonts are used to highlight tasks which are overdue, not yet done, and to point out the relationship between projects and the departments working on them.
# *Demo #19X
This is a very practical example of how per-cell colors and fonts can be used to convey relationships between data.
READ THIS FIRST, then click on the "Demo 19 - Per-cell Colors/Fonts" title to bring the demonstration form to the front so you can try it.
Colors and fonts are used creatively in this form to show both task status and relationships between tasks.
>> The form shows a corporate task database:
Task: The name of the task. Tasks which are yet to be completed are highlighted with a light yellow background.
EntryDate: The date the original task was scheduled. By default, the table is sorted in order by this date. (You can change the sort order by clicking on a heading with the right mouse button ... but not yet).
Target: This is the anticipated completion date of the task. Any tasks which are overdue are shown in red italics. The form "thinks" it's 12/20/93 so you'll note that three tasks have not been completed by that date.
Done: Indicates that a task has been completed. If incomplete, the word "No" appears here in boldface type and the task name appears with a light yellow background.
Project: Each project has a code name. Because several projects are in progress at all times, tasks for various projects are interwoven in the list. When a task is selected, the project name is highlighted in light blue, as are all other tasks for that project. This makes it easy to see at a glance which tasks are related to one another by project.
Department: Each task is assigned to a particular department. Like project column, the department associated with the current row is highlighted in light blue wherever it appears. This draws your attention to other tasks which are being done by the same department.
>> Things to try:
Click on various rows within the task list and notice how the highlighting makes it easy to determine how projects, departments, and tasks are related.
It is easy to spot tasks which are overdue (looking at the Target column) and tasks which are pending (shown with a yellow background).
The table is shown sorted in order by the column whose title is underlined. You can change the sort order by clicking on the heading with the right mouse button (the left button is used to rearrange the columns).
>> How it is done:
This demo illustrates several techniques for working with colors and fonts.
1. The FetchAttributes event contains code to (a) highlight pending tasks in yellow, (b) show overdue tasks with a red italic target date.
2. TrueGrid has a set of color and font features which automatically perform pattern matching on cells and set attributes according to a list of colors and fonts for each pattern. This is completely automatic once it's set up, and TrueGrid assures that cells have the proper color and font even when new data is displayed, rows are deleted, or rows are added. The "Done" column has a pattern defined for "No" values so that they appear in bold. The "Project" and "Department" column uses the same feature, but changes the pattern each time the row changes.
3. The MouseDown event is used to detect a click within the heading region, and uses the ColumnHeadFontStyle property to underline the heading to indicate which column defines the sort order.
# *Demo #20
This demo shows how to keep totals for columns and display them in separate text boxes outside of the grid.
TrueGrid contains a unique feature, tailored for row-oriented data display, which automatically keeps totals for columns as data is refreshed and modified.
# *Demo #20X
This demo shows how to keep totals for columns and display them in separate text boxes outside of the grid.
READ THIS FIRST, then click on the "Demo 20 - Column Summaries" title to bring the demonstration form to the front so you can try it.
TrueGrid has a special event, ColumnSumChange, which can be triggered automatically when the calcualted total for a column changes due to user modification or changes to the database or displayed data.
Unlike simpler spreadsheet-style summary calculations, TrueGrid is specially designed for large row-oriented table totalling. TrueGrid calculates the total value of a column once. Then, as data is modified, TrueGrid maintains an internal "delta" and keeps the total up to date without the need for constant recalculation. Once enabled, TrueGrid handles all of the column summary maintenace and simply notifies your program with the ColumnSumChange event whenever the total changes for any reason (such as a database refresh, or user modification of cell data).
TrueGrid even has features so that you can "seed" the total using the SQL SUM() function so that TrueGrid doesn't have to pre-calculate the total by reading each record in the table.
>> How it is done...
This demo form shows how easy it is to use the summary feature.
Two columns, the "Cost" and "MSRP" columns have summaries enabled by setting ColumnSumEnable to True in Form_Load. Then, when TrueGrid detects a change in the total, it triggers ColumnSumChange. Code in the ColumnSumChange gets the current running total using the ColumnSum property and displays the appropriate value in the text boxes below the column.
# *Demo #99
TrueGrid can be used to do a wide variety of unconventional tasks. This demo uses TrueGrid to build a working chess gameboard.
Using callback mode (no database), chess pieces are displayed in cells and per-cell color properties are used to color the gameboard. Pieces can be moved and dropped using the built-in drag-and-drop features.
# *Demo #99X
TrueGrid can be used to do a wide variety of unconventional tasks. This demo uses TrueGrid to build a working chess gameboard.
This is a fun, and interesting, example of how TrueGrid can be used for less conventional tasks. Using callback mode, TrueGrid is used to display a chess gameboard. You can move pieces by picking them up and dropping them on a blank space, or by capturing another piece.
As you might guess, this form doesn't worry about whether the moves you make are valid, but just keeps track of where the pieces are and where you move them to. If you have a few months of free time on your hands, maybe you can enhance this form to play a reasonable game of chess!
>> How it works:
The demo contains hidden image controls containing the bitmaps for the chess pieces. The location of the pieces is kept in an 8x8 integer array.
TrueGrid is configured in callback mode. When it needs to display a cell, TrueGrid fires the Fetch event. Code in the fetch event consults the piece location array to decide which picture to display in the cell.
When you attempt to drag a piece, TrueGrid fires the DragCell event. Code in DragCell determines whether there is a piece on the given square, then sets a flag to indicate that a piece is in motion. The DragOver takes care of updating the current target square's location.
All of the colors are controlled using the FetchAttributes event. TrueGrid uses the FetchAttributes evnet to request the cell color for each cell displayed. Normally, cells are either red or dark blue in order to create a checkerboard effect. When a piece is being moved, code in FetchAttributes leaves the cell color alone so that the black background can show through in order to emphasize the target cell location.
This form doesn't rely on the standard "row marquee" to highlight the current row location, but uses the color settings in FetchAttributes for all highlighting and color display. The row and column number are irrelevant to this demo.
This demo also uses a "trick" to cause the current cell to refresh with a minimum of flicker. The Windows API SendMessage call is used to tell TrueGrid to refresh only the current square. This is the only demo which uses such a trick. All the others rely only on standard TrueGrid properties. (However, if you find this useful, the technique is easy to use in your own applications.)
