ContextQMD
Back to Devexpress

Grid Mode: Master-Detail

vcl-171059-expressquantumgrid-concepts-grid-mode-master-detail.md

latest10.0 KB
Original Source

Grid Mode: Master-Detail

  • Aug 07, 2024
  • 6 minutes to read

ExpressQuantumGrid provides a special data loading mode called grid mode, which loads only a fraction of the dataset records at a time, thus improving performance for huge datasets.

This document describes how to set up a master-detail relationship between datasets in grid mode.

Note

if you enable grid mode for a master/detail relationship, both Views must be in grid mode , else data will not be displayed correctly.

To represent a master-detail relationship between storages in ExpressQuantumGrid , you need to create a hierarchical structure of grid levels and Views similar to the one shown in the following image:

The first View (MasterTableView) will display data from a master dataset, while the second View (DetailTableView) will display records from the detail dataset corresponding to the selected master record.

Refer to the Working with Levels section to learn how to create such a structure at design time and via code.

In default loading mode (grid mode is disabled), you use the properties of the detail data controller to specify the fields used to establish the connection between master and detail tables. Refer to the Master-Detail section as this provides an example of creating a master-detail relationship between database tables when grid mode is not applied.

In grid mode , however, you have to establish a master-detail relationship in the usual way described in the Delphi/C++ Builder documentation, i.e. by using properties provided by dataset components. You can refer to the Making the table a detail of another dataset and Establishing master/detail relationships using parameters sections, which provide information for this task.

When grid mode is applied, only one detail clone can be visible on screen at once. When you switch from one detail clone to another, the first one is collapsed. See the Data Representation section for more information on clones.

Consider an example of creating a master-detail relationship in grid mode between the CARS and ORDERS tables shipped with the ExpressQuantumGrid demos. The CARS table describes all available cars. Each car is uniquely identified by the ID field. The ORDERS table contains information on orders and every order addresses the car bought via the ProductID field. ProductID corresponds to the ID field from the CARS table.

In our example, the CARS table will be displayed in a master View, while the ORDERS table will be represented as a detail View, providing information on all orders of a particular car.

  1. Create an empty application.

  2. Create a database which will be connected to the demo tables. Place a TDatabase component on a form. Set its properties as follows:

In order to specify connection parameters for the database, double-click on the component. In the opened Database Editor dialog click the Defaults button to obtain a list of all parameters, as well as their default values. Set the PATH parameter to a string which defines a path to the directory where the CARS and ORDERS tables are located. Click the OK button to close the Database Editor dialog.

To connect the database to the demo tables, set its Connected property to True.

  1. Place a query component on the form. This query will select records from the master CARS table. Set its properties as follows:

  • SQL to “SELECT * from Cars”. This specifies the query which will select all the fields in the CARS table. To set the query, click the ellipsis button in the SQL property:

This activates the editor to enter the query text so you can type the required string.

  • Active to True. Note that the Active property must be set after all the other properties have been set.

  1. Place a TDataSource component on the form and connect it to the qryCars dataset by setting its DataSet property to qryCars. Rename the component to dsCars.

  1. Place another query component on the form. This query will select records from the ORDERS table for a specific detail clone, i.e. depending on the currently selected record in the master table. Set the properties of the component to the following values:

  • DatabaseName to DemosDB

  • Name to qryOrders

  • DataSource to dsCars. This provides the master dataset link.

  • SQL to “SELECT * from Orders WHERE Orders.ProductID = :ID”. The property is set as shown above for the qryCars component.

This SQL statement selects only those records from the ORDERS table which contain a particular value of the ProductID field.

The :ID parameter of the WHERE clause has the same name as the ID field from the dsCars data source (set as the DataSource property value). This ensures that correct ID field value is used for the currently selected record in the dsCars data source.

  • Active to True. Note that the Active property must be set after all other properties have been specified.

  1. Create another instance of the TDataSource component. Connect it to the qryOrders query by setting its DataSet property to qryOrders. Also, set the name of the component to dsOrders.

  1. Place a TcxGrid control onto the form and create a structure of grid levels and Views as shown in the image below:

Each level (lvCars and lvOrders) is associated with a data-aware grid Table View (tvCars and tvOrders, respectively). Refer to the Working with Levels section to see how to create such a structure at design time or by code.

  1. Open the tvCars View’s properties in the Object Inspector and set them as follows:

  1. In a similar way, customize the tvOrders View. Set its properties to the following values:
  1. Create columns for the Views. For this purpose, you can right-click the View boxes in the Structure Navigator and select the Create All Columns option from the context menu. The command creates a column for every field from the underlying dataset, specifies the column caption and width and assigns default editors based on the corresponding field properties.

The GridModeDemo provides a more elaborate example of implementing a master-detail relationship in grid mode.