How Do I Create Rows That Can Expand/Contract?
This lesson will show you how to make a Data Grid form with rows that expand and contract when clicking on an arrow.
You can download the stack for this lesson here: https://tinyurl.com/yaszfkn5
Expanding and Contracting Rows
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.
Setting the Data Grid Properties
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.
Updating the Row Behavior Script
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.
0 Comments
Add your comment