You can maintain existing GroupBoxes in a ViewModel, but you should use Placing Containers for all new layouts because GroupBox support is being discontinued.
Deprecation and replacement
Do not add GroupBoxes to new designs. Remove and replace existing GroupBoxes when you change the surrounding layout. GroupBoxes did not work consistently across clients, and Placing Containers are the supported replacement for arranging grouped user-interface content.
This page documents GroupBox behavior only so that you can understand and migrate existing ViewModels.
What a GroupBox is
A GroupBox is a normal ViewModel column for which Is GroupBox is set to true. Its expression supplies the GroupBox heading; the expression is therefore normally a string.
Other ViewModel columns become members of that GroupBox when their Include in GroupBox value refers to the GroupBox column.
For example, an existing ViewModel might contain a column whose expression evaluates to 'Contact details' and has Is GroupBox set. Columns for name, email, and phone can then include that GroupBox. At runtime, the client can render these columns as one named visual group.
Maintain an existing GroupBox
Use this procedure only while maintaining a legacy layout.
- Open the ViewModel in MDriven Designer's ViewModel Editor.
- Select the column that represents the GroupBox.
- Confirm that Is GroupBox is set to true.
- Set the column expression to the heading you want to show. For example, use
'Contact details'for a fixed heading. - Select each column that belongs in the group and set Include in GroupBox to the GroupBox column.
- Review the layout in the target client. Plan to replace the grouping with a Placing Container rather than extending the legacy GroupBox structure.
Moving grouped columns in the Designer
In MDriven Designer, moving a GroupBox moves its included content. Moving a column that is already included in a GroupBox changes its position within that GroupBox.
To move a column out of the group, clear its Include in GroupBox value. Until you clear that value, the column remains part of the GroupBox.
GroupBox heading behavior
The GroupBox column expression is used as the heading. If you do not want a heading, enter an empty string expression:
''Also leave the Presentation field empty. This prevents an external ID, such as 44!12, from appearing in the upper-left corner in the legacy GroupBox rendering.
Legacy runtime model
A ViewModel column used as a GroupBox has the following legacy properties and method:
| Member | Meaning |
|---|---|
IsGroupBox : Boolean
|
True on the ViewModel column that defines the GroupBox. |
IncludeInGroupBox_Id : string
|
Empty for a column outside a GroupBox. For an included column, contains the ID of the GroupBox column. |
GetIncludedInGroupBox() : ViewModelColumn
|
Resolves IncludeInGroupBox_Id to the corresponding GroupBox ViewModel column.
|
The inclusion relationship is stored as an ID rather than a direct column reference. A client can render part of a ViewModel definition before it has encountered a GroupBox that is declared later in that definition. Resolving the ID in a later pass allows that declaration order.
Styling legacy GroupBoxes
The MDriven Stylesheet documents stylesheet classes for legacy GroupBox wrappers. To render a GroupBox as a card wrapper, add tk-group-card to the GroupBox column's Style ref and add the HideHeading tagged value.
Example: a legacy GroupBox that contains a summary can use tk-group-card as its Style ref while its heading is hidden with HideHeading. Keep the content and visual styling in the GroupBox only while you are maintaining that legacy design; use a Placing Container for replacement work.
For stylesheet class conventions and other UI patterns, see Documentation:MDriven Stylesheet and Documentation:CSS BEM.
Historical implementation status
The following status describes the legacy GroupBox implementation:
| Client or tool | Status |
|---|---|
| MDriven Designer | Yes |
| WPF FatClient | Yes |
| Turnkey MVC and Angular | No; planned |
| Turnkey WPF client | No; planned |
| WinForms | No; not planned |
| Silverlight | No; not planned |
| ASP.NET | No; not planned |
Do not use this table to select a layout technique for a new application. Use Placing Containers instead.