Master-Detail Tutorial. Step 3: Connecting Views to Data

• Aug 02, 2022
• 3 minutes to read

This section shows how to connect Views to datasets. To represent particular data fields, we will create items (columns in a Table View and rows in a Card View).

This section also shows how to display tabs for root and nested levels of the hierarchy. We need to provide tabs for switching between the root tvFilms and tvPersons Views and between the detail tvStaff and cvFilmScreens Views.

1. Display the properties of the tvFilms View in the Object Inspector. Expand the DataController property and set its DataSource attribute to dsFilms.

In a similar way, set the DataController.DataSource property of the tvStaff, cvFilmScreens and tvPersons Views to dsStaff, dsFilmScreens and dsPersons respectively.

2. For Views to display data, you need to create columns (or rows in a Card View). The easiest way to create columns in data-aware Views is to right-click the View’s box in the Structure Navigator and select the Create All Columns option.

Perform this operation for each Table View (tvFilms, tvStaff, tvPersons).

For a Card View, we will create a column manually via the Component Editor:

• Double-click the grid control to open the Component Editor.

• Select the cvFilmScreens box on the Structure panel:

• Click the Add button on the Rows panel. This will add a new card row.

• The Object Inspector should now display the properties of the new row. If not, select the row on the Rows panel. Using the Object Inspector, set the row’s DataBinding.FieldName property to SCREEN.

Now you can see the grid control currently displaying the data from the FILMS table via the tvFilms View.

Expanding master rows will do nothing, as we have not established a master-detail relationship at the table level yet (this is described below). Also, you cannot see the tvPersons View.

3. Enable the tabs used to switch between Views at the same hierarchy level (tvFilms-tvPersons and tvStaff-cvFilmScreens).

• To activate tabs at the root hierarchy level, set the grid’s RootLevelOptions.DetailTabsPosition property to dtpTop, for instance.

• You also need to activate tabs for the details of the lvFilms level. You can do this by setting the Options.DetailTabsPosition property of the lvFilms level to dtpTop.

• Additionally, you need to specify the captions to be displayed on the tabs for each grid level (lvFilms, lvPersons, lvStaff and lvFilmScreens). Display the properties of the lvFilms level in the Object Inspector and set its Caption property to ‘Films’.

Similarly, set the Caption properties of the other three levels to ‘Persons’, ‘Staff’ and ‘Film Screens’ respectively. In the following image, you can see the tabs for the Films and Persons levels:

Now you are able to switch to the tvPersons View.