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.
Mark
If I am using unlocked fields, and allowing users to enter data, how can I have the row increase in height dynamically? If that is currently a limitation I'll submit it as a feature request for some future version. Thanks
Elanor Buchanan
Hi Mark
You will need to resize the field at the user types, an refresh the DataGrid at a chosen point. Adding the following to the row script will resize the field as the user types and refresh the row when they stop typing. You can experiment to get these things to happen when you want.
on textChanged
if the formattedHeight of field "Label" of me > the height of field "Label" of me then
set the height of field "Label" of me to the formattedHeight of field "Label" of me
end if
SetDataOfLine the dgLine of me, "Label", the text of field "Label" of me
end textChanged
on closeField
RefreshLine the dgLine of me
end closeField
I hope that helps, let me know if it is not quite what you need.
Kind regards
Elanor
Mark
Thanks Elanor, I look forward to trying out your suggestions. Right now working on a few other features but really excited to see there might be the possibility to dynamically resizing the row height. I'll let you know.
Michael Bluejay
"With Select Grouped turned on..."
You might want to mention how exactly to do this esoteric thing.
Elanor Buchanan
Hi Michael
You turn on the "Select Grouped" option using the button in the Menubar.
I have updated the "Turn Off dontWrap Property" section in the lesson slightly to try and make the steps a bit clearer.
Kind regards
Elanor