Banded Table View Tutorial. Step 2: Configure Content and Layout

• Aug 09, 2024
• 4 minutes to read

In the previous step, you populated the control with data. This step shows how to do the following:

• Manage and customize grid columns.
• Use lookup editors and repository items to display more user-friendly data.

Column Management

Click the “Customize…” button in the Structure Navigator to open the Component Editor.

Delete

The View‘s data controller now contains many columns. Delete the following columns that are not used in this tutorial:

1. tvEmployeesRecId
2. tvEmployeesId
3. tvEmployeesDepartment
4. tvEmployeesStatus
5. tvEmployeesFullName
6. tvEmployeesSkype
7. tvEmployeesPictureId
8. tvEmployeesAddress_Latitude
9. tvEmployeesAddress_Longitude
10. tvEmployeesProbation_ReasonId
11. tvEmployeesPicture

Hold Ctrl to select multiple columns. Press Delete or click the dialog’s Delete button.

Reorder

Rearrange the remaining columns. The following order applies to columns as soon as you link them to a band:

1. tvEmployeesPrefix
2. tvEmployeesFirstName
3. tvEmployeesLastName
4. tvEmployeesBirthDate
5. tvEmployeesTitle
6. tvEmployeesHireDate
7. tvEmployeesPersonalProfile
8. tvEmployeesHomePhone
9. tvEmployeesMobilePhone
10. tvEmployeesEmail
11. tvEmployeesAddress_Line
12. tvEmployeesAddress_City
13. tvEmployeesAddress_State
14. tvEmployeesAddress_ZipCode

Select one or more columns and click “Move Up” or “Move Down” to rearrange them.

Close the dialog.

Tip

You can drag and drop column headers to rearrange columns in the control.

Resize

Widen the form to display more columns. Set the form’s width and height to 900 and 400 pixels.

The PersonalProfile column displays its content partially. Select the column and set its Width property to 250 to fit content.

Configure other columns. Double-click the right border of each column header to set column widths according to content size as shown below:

This operation decreases the scroll area and allows you to fit as much columns as possible to the View. Scroll the View horizontally to adjust the width of all columns.

Tip

You can drag a column’s right border to specify a custom width.

The image below shows the resized columns.

Change Captions

You can modify a selected column’s settings in the Object Inspector. Click a column header to select a column.

Change column captions (the Caption property) as follows:

• Replace the Address_Line with Address.

• Delete the “Address_” prefix from the Address_City, Address_State, and Address_ZipCode captions.

• Add spaces to captions that consist of more than one word.

The following image shows the modified captions:

Lookup Editor

Add Lookup Data Sources

This section explains how to use lookup editors to display string values instead of IDs in the Prefix and State columns. First, create two more datasets in the same manner as in the previous step:

1. Add two TdxMemData components and name them mdPrefixes and mdStates.
2. Add two TDataSource components and name them dsPrefixes and dsStates.
3. Assign the corresponding dataset to a data source’s DataSet property to link the components.
4. Add columns from the Prefix and States .dat files to these datasets (see the step 1). These files are available at the following path: C:\Users\Public\Documents\DevExpress\VCL\Demos\ExpressQuantumGrid\Data\
5. Load records to the datasets from the same files.

Assign a Lookup Editor

Associate the Prefix and State columns with a lookup combo box that can display values from the bound data source. Select the columns and assign LookupComboBox to the Properties property.

Specify Lookup Settings

Click the Prefix column to display its settings in the Object Inspector.

Expand the column’s Properties property and follow the steps below to replace indexes with strings:

1. Assign dsPrefixes to the editor’s ListSource property.

2. Set the KeyFieldNames property to Prefix_ID to specify the name of the data source field whose values are used to identify data records.

3. Set the ListFieldNames property to Prefix_Name to specify the data source field whose values should be displayed in column cells instead of department indexes.

Configure the same settings for the State column.

Tip

Press Ctrl+H to hide non-visual components that can overlap the View’s content.

The Prefix and State columns now display text instead of IDs.

Hyperlink Editor

Convert plain text in the Email column to a hyperlink.

Add a TcxEditRepository component to the form. This component allows you to customize column editors and then re-use them within multiple columns.

Double-click the component to open the Edit Repository dialog.

Click Add… in the dialog, select a hyperlink item, and click OK.

Rename the item erHyperLinkItem1 in the Object Inspector and close the dialog.

Select the Email column and assign erHyperLinkItem1 to the RepositoryItem property.

The image below shows the result:

The View now displays data in a user-friendly format. The next step describes how to group columns into bands.