How Do I Create a Form with Variable Line Heights?
This lesson will show you how to create a data grid form with variable height lines by modifying the default data grid Row Template and Row Behavior.
Turn Off "fixed control height"
To begin, turn off fixed control height for your data grid form in the property inspector.
Edit Row Template
Open the card that has the row template group by clicking the Row Template button.
Turn Off dontWrap Property
The default row template for a data grid has a single field that displays data.
- Ensure Select Grouped is turned on using the button in the Menubar.
- Select the field.
- Using the Property Inspector turn off dontWrap.
You can now close the stack.
Edit Row Behavior
Return to the Property Inspector for your data grid. Edit the row behavior by clicking on the Edit Script button.
Script Field to Resize to Fit Height
You only need to make a few modifications to the default LayoutControl handler in order to get your field to resize to fit the height.
The default LayoutControl handler resizes the field to fill the available width (1). After that is done you then need to resize the field to fill the formattedHeight (2). Finally, resize adjust the rect of the Background graphic to take into account the new field height (3).
Refresh Data Grid Contents
You can now refresh the data grid contents to see the new behavior (1). Notice how each line is resized to fit all of the text.