LiveCode LessonsData GridLiveCode Data GridWorking With Data Grid FormsHow Do I Create a Form with Variable Line Heights?

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"

Turn Off "fixed control height"

To begin, turn off fixed control height for your data grid form in the property inspector.

Edit Row Template

Edit Row Template

Open the card that has the row template group by clicking the Row Template button.

Turn Off dontWrap Property

Turn Off dontWrap Property

The default row template for a data grid has a single field that displays data.

  1. Ensure Select Grouped is turned on using the button in the Menubar.
  2. Select the field.
  3. Using the Property Inspector turn off dontWrap.

You can now close the stack.

Edit Row Behavior

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

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

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.

5 Comments

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

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.