ContextQMD
Back to Devexpress

Master-Detail Tutorial. Step 6: Customizing Views

vcl-171174-expressquantumgrid-tutorials-master-detail-tutorial-step-6-customizing-views.md

latest5.0 KB
Original Source

Master-Detail Tutorial. Step 6: Customizing Views

  • Aug 02, 2022
  • 3 minutes to read

This section describes the steps required to customize the layout and the appearance of Views.

  1. Set the MaxDetailHeight property of the master lvFilms level to 200 in order to limit the height of the detail Views (tvStaff and cvFilmScreens)

The result is shown below:

  1. For the tvFilms View, hide the tvFilmsID, tvFilmsPLOTOUTLINE, tvFilmsCOLOR, tvFilmsPHOTO, tvFilmsICON and tvFilmsWEBSITE columns by setting their Visible property to False.

  1. Similarly, hide the tvStaffID, tvStaffFilmID and tvStaffPERSONLINEID columns in the tvStaff View.

  2. Hide the following columns for the tvPersons View: tvPersonsID, tvPersonsBIRTHCOUNTRY, tvPersonsLOCATIONOFBIRTH, tvPersonsBIRTHNAME, tvPersonsNICKNAME and tvPersonsHOMEPAGE.

  3. In order to display the TAGLINE field in the preview section, set the properties of the tvFilms View to the following values:

The preview section in the following image is displayed in blue. Notice how it spans regular columns.

  1. Set the Options.ShowCaption property of the SCREEN card row in the cvFilmScreens View to False.

This hides the caption of the row:

  1. Set the OptionsView.CellAutoHeight property of the cvFilmScreens View to True.

This changes the size of View rows to fully display their contents.

  1. Change the width of columns depending on your needs. You can do this in a number of ways:

  • set the column’s Width property via the Object Inspector

  • drag the column’s right edge. See the note below.

  • double-click the column’s right edge to set the width according to the contents of the column’s cells. See the note below.

Note

At design time, you cannot specify the layout of detail Views by moving/resizing their columns right on the form. Details on screen are represented by a number of clones created based on the pattern View (in our example, the tvStaff and cvFilmScreens Views are patterns). Expanding a specific master row in a master View (tvFilms) opens a detail clone created based upon the settings of the detail pattern View. So changing settings of a particular detail clone at design time is in no effect since clones will be recreated at runtime and any changes will be discarded. For detail Views, you have to use the Layout Editor. See the View Layout section for more information.

  1. Create style sheets for Table and Card Views based on the predefined DevExpress color scheme and assign them to the Views (tvFilms, tvStaff, cvFilmScreens and tvPersons). Refer to the Styles and Style Sheets sections of the Table View and Card View tutorialsI for more information.

The following images show the result of View customizations.

You can click the ‘+’ button of a master row in the tvFilms Table View to access the detail tvStaff and tvFilmScreens Views. To switch between the Views, use the corresponding tabs (Staff and Film Screens). You can see that detail Views display information related to the selected master row.

To access the tvPersons View, click the Persons tab at the root level. It displays records from the PERSONS table. The data of the PERSONS table is independent of data from other tables used in this tutorial.

See Also

Specifying Editors for Items