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 #2: for wide tables
The solution presented here is for wide tables where all the columns don't fit within the available width and the table therefore requires horizontal scrolling. For narrow tables that do not require horizontal scrolling, a simpler solution can be found in this article: How to use controls and other overlays in Tables #1: Narrow tables
It's worth getting familiar with the simpler solution first because this solution builds on the same principles. In this case, we need two levels of components: one provides vertical scrolling while maintaining the header row (as Solution #1) while the second provides horizontal scrolling.
The major caveat here is that the vertical scroll bar is only visible, and therefore available, when the table is scrolled all the way to the right. This compromise is acceptable for prototyping purposes because, on the whole, one row is much like any other in terms of demonstrating content.
In this solution, we'll create the following example Table containing Check Boxes, Images and Combo Boxes with a common Drop-Down List:
(A) Create a Table Content design
This first stage is similar to that of Solution #1 but the example presented in this article is different and the header row is left in.
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 Options to remove the Border and Scroll Bars since these will be provided by the containers:
4. 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 our example Table Content design at this stage:
5. Now add overlay content, as required. In this example, Check Boxes, Images and Combo Boxes with their associated Drop-Down Lists have been added:
6. Save the design.
(B) Create a mid-layer container to provide vertical scrolling
The mid layer is a full-width Component that contains the content plus the fixed Header row. This whole component then gets scrolled horizontally in the next container layer. It's not possible to do this in one Component stage because the content and header scrolling need to work independently.
7. Create a new design file. In this example, we'll call it "TableMidLayer.gui". There are just 2 elements to add to this design.
8. Drag and drop the Table Content design onto the new design as a Component.
9. 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:
10. Resize the content Component. Increase its Width by 16 pixels to accommodate the vertical scroll bar and reduce its Height to whatever you need it to be:
11. So far, you've created a wide Table with overlays that scrolls vertically with all of the overlays behaving correctly. But the Header row also scrolls out of sight. To fix that, take a copy of just the Table element from your Content design and paste it on top of the mid-layer Component. Snap it to the top-left corner.
12. Delete all of the data from the Table copy and adjust its Height so just the Header row is visible. The design should now look identical to that in step 10 except that now you have a Header row that will remain in place when you scroll vertically:
(C) Create the container to complete the Table and provide horizontal scrolling
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.
13. Create your container design. In this example, we'll call it "TableWidget.gui". Again, there are just 2 elements to add to this design and complete the custom Table.
14. We need a border for the table so add a simple Rectangle element to the design. The mid-layer table component will fit within this Rectangle. Style it however you want to obtain the desired border.
15. Now drag and drop the Table Mid Layer design on top as a Component and, just as before, set its properties to maintain size when changed and release the Fixed Width and Height restrictions.
16. Resize the Component. Increase its Height by 16 pixels to accommodate the horizontal scroll bar and reduce its Width to whatever you need it to be.
17. Resize the border Rectangle so that it fits nicely around the Component:
18. When you run the design, you should now be able to scroll the table, including its header, horizontally. If you scroll all the way to the right, you'll reveal the vertical scroll bar to scroll through your data while keeping the header and horizontal scroll bar visible at all times:
For narrow tables that do not require horizontal scrolling, the solution is much simpler. See this article for details:
How to use controls and other overlays in Tables #1: Narrow tables
The two design files in this example are attached below: