LiveCode LessonsLiveCode Data Grid Working 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. With Select Grouped turned on (1) select the field (2). Using the Property Inspector turn off dontWrap (3). 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 Row Behavior 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.

0 Comments

Add your comment

E-Mail me when someone replies to this comment