Applies to: All versions of GUI Design Studio (v3.3 - v4.3, at the time of writing)
You want to incorporate Check Boxes, Combo Boxes, Icons and other controls into your Table but it only supports simple text as cell content.
The Table element will be expanded in future to support different data types for each column but it currently only supports simple text.
The usual solution is to overlay other elements on top of the Table to provide the necessary controls. Unfortunately, since scrolling was added in v3.3, this is inadequate since scrolling the underlying Table will leave all of the overlaid elements in the same place on screen.
Solution #1: for narrow tables
The solution presented here is for narrow tables where all of the columns fit within the available width and the table will therefore not require horizontal scrolling. For wider tables, see this article: How to use controls and other overlays in Tables #2: Wide tables
The general idea is to place the table content into its own component design and use that as a scrolling region on the target design. But there are a few tricks required to keep the table header row in place and make it look right.
In this solution, we'll create the following example Table containing icons and other overlays:
(A) Create a Table Content design
1. Create a new design file for your table content. For the purposes of this article, the design will be named "TableContent.gui".
2. Add a Table element to the new design.
3. Modify the Style properties to remove the Header row since we don't want this to scroll so it will be provided elsewhere:
4. Modify the Options to remove the Border and Scroll Bars since these will also be provided by the container:
5. Set all other properties as required, specify the columns and add the text data. Resize the Table so that all of the content is visible. Here's an example TableContent design at this stage:
6. Now add overlay content, as required. In this example, icons have been added to the first column and coloured text has been added to the second column. But overlays can be anything including controls such as Check Boxes and Combo Boxes with their associated Drop-Down Lists attached.
7. Save the design.
(B) Create the container to complete the Table
For this example, the custom table will be created as a self-contained "Table Widget" design but you can use the same technique to create the table directly onto a container design such as a dialog box or other window.
8. Create your container design. In this example, we'll call it "TableWidget.gui".
9. Copy just the Table element from your Table Content design and paste it into the new design.
10. Edit the properties of the copy to add the Header and Border back in, but not the Scroll Bars, and delete all of the data rows. Resize the Table to fit whatever space you want. Remember to add about 20 pixels to the width to allow for the border and a vertical scroll bar. You'll end up with something like this:
11. Now drag and drop the Table Content design on top.
12. Change the Component properties to remove the Fixed Width and Height options (Position tab) and set it to maintain its specified size at all times. This is what creates the scrolling region:
13. Now resize the content Component to fit within the Table and add any header overlays, such as icons or Check boxes, and you're done! The content will scroll and the Header will remain in place:
14. If you're using GUI Design Studio Professional v4.2 or above, you can set Resize Anchors on the Component if you want so that it automatically resizes with the Table container. You can also group all of the elements that make up the custom table (Ctrl+G), as shown below by the orange dashed border when the content component is selected:
For wide tables that require horizontal scrolling, the solution is a bit more complex and requires a compromise in behaviour. See this article for details:
How to use controls and other overlays in Tables #2: Wide tables
The two design files in this example are attached below: