FirePower X - The Master Detail Grid (Using the TwwExpander)

Hey everyone!

Today we are going to go over how to create a grid that allows the end-user to expand and see a detail grid within the expanded master row. With FirePower, we can use the TwwExpander to accomplish this task. Many times we would rather have information condensed with the ability to expand and see more information rather than displaying everything or having to use a separate area of the screen. With the TwwExpander, this allows you to expand and collapse certain information that would be under a given master record, such as when displaying customer info and expanding to see the invoice details. It would look like something like this:



We then would click on the expand icon next to 1221 to expand it:



I could click on the expand button again and it would close back up. This is a feature that provides the end user use with a more natural and organized feel and can be a great addition to their workflow when editing or retrieving information from the database.

How to Implement this to your program:

Connect data to your application using datasets and bind sources

1. In order to do this for demo purposes, we are going to start out by adding two “TFDMemTable’s” from the Palette. Normally you will want to use a real database connection so that your data is persistent, meaning changes can be edited and saved. You can do this by using TFDTable and TFDConnection, but for our demo we are going to simplify this part of the setup by using TFDMemTable.

2. Once we have dropped in our datasets, let us name the first one “fdcustomermaster” and the second one “.fdcustomerdetails.’ We are now going to load them with data from xml files. One should be loaded in with the master records but the other must have the detail records, or the extra information that is attached to each customer. In order to load our dataset with the data, you must right click on the MemTable and click “load from file” and do this for both of them.

3. After this, we need to add a TBindSource to each “TFDMemTable.” so that visual controls such as a grid can connect to them. To create the TBindSource, all we need to do is right click on the “TFDMemTable” and select “add Bind Source” from the pop-up menu. We are going to name the bind source connected to the fdcustomermast as bsMaster, and the "BindSource" connected to fdcustomerdetails as bsDetails. It is important to rename these to more meaningful names so you will not later be confused on which dataset is connected to each bind source.

Relate both of these datasets in a master detail relationship

We would like the details to change whenever we move to a new master record. This requires that we setup a master/detail relationship between these two datasets. One way to relate these datasets is to set the MasterSource, MasterFields, and IndexFieldNames properties of the detail dataset.

1. The MasterSource property of a dataset requires a TDataSource which we currently do not have in our form. So let us drop in a TDataSource from the palette, and then set its DataSet property to our master dataset. Also let us change the Name property of this TDataSource to dsMaster.

2. Now to establish the master/detail link we set the following properties for the detail dataset “fdcustomerdetails” * MasterSource property = dsMaster * MasterFields = CustNo * IndexFieldNames = CustNo

Drop in a TwwDataGrid component and connect them to your master records (fdcustomermaster/bsMaster)

Once all of this Data is added and linked to bind sources and the data source, you then link it to your own grid.

So drop in a TwwDataGrid into your from and then let us set the Align property to Client. Now let us connect it to the data in ‘fdcustomermaster’ by assigning its DataSource property to the bind source (bsMaster)

Drop in a TwwExpander component and place in it a datagrid displaying your detail records

(fdcustomerdetails/bsDetails)

Your Master Grid that displays all of the info at the first glance should now have your customer records inside. In this example you will see my customer info. However, each customer has a list of order associated with them. But rather than clicking on the customer to go to a different page or just not displayed at all, I can use an expander so that when I click on the customer, more data pops up. The steps are as follows:

1. Add your “TwwExpander” from the palette, and then dal-click it to set it to an expanded state. Resize the expander so that your detail grid can fit comfortably within it. Name this TwwExpander component “expDetails”

2. Now drop a new TwwDataGrid into the expander. Make sure your grid is actually within the expander by going to structure and seeing if the grid is in the twwExpander. Now set the grid’s align property to Client. This will allow the grid to fill the entire client area of the expanded TwwExoander. Let us name this grid “gridDetails”

3. Connect your detail records to this grid by setting the grid’s DataSource property to bsDetails

Configure the master grid to use this TwwExpander so that this control is visible in the master grid in its first column

Dbl-click on your master grid (gridMaster) and click on edit fields. Click on which field you want to have the expander attached to. We recommend the first column. as this is more intuitive when expander expand to a grid. After selecting the first column, set the CustomControl property under the object inspector to our newly created TwwExpander (expDetails).

Run your program

1. Press F9 and run the program see how this new feature works for you!