How Do I Create Rows That Can Expand/Contract?

This is what the example stack looks like. By default all of the rows are contracted and only show names.

Clicking on the arrow next to a name expands the row to show the description of the person.

To create a Data Grid form with rows that expand/contact you need to turn off "fixed control height" in the property inspector.

Note: To turn off the property using script you set the dgProp["fixed row height"] property to false.

In order to get expanding rows working you need to take a couple of things into account in the Row Behavior Script.

In the FillInData message you should show or hide controls as necessary. The example stack stores the expanded state of each row in the "expanded" key.

In the LayoutControl message you need to readjust the position of the controls and background graphic based on whether or not the row is expanded or contracted. Since the "fixed row height" property is set to false the Data Grid computes the total height of the data based on the height of each row after calling LayoutControl.

When the user clicks on the arrow the example stack updates the expanded key in the row's data and then redraws the row. Using SetDataOfIndex in conjunction with RefreshIndex is the most efficient way to do this.