Component Editor
- 10 minutes to read
This topic describes the Structure Navigator and the Component Editor used to customize the grid control at design time. This includes specifying the structure for the representation of multiple datasets (including master-detail relationships), connecting to datasets, retrieving columns and adding summaries. Using the Component Editor together with the Object Inspector allows you to adjust most of the properties of grid View elements without writing a single line of code. The Component Editor represents the grid’s structure in a regular form.
Before reading this topic, you must understand the terms View and “level as the base constituents of our grid control. Grid levels are objects used for the creation of tree-like structures to represent data. Using levels you can represent, for instance, master-detail relationships between datasets. Master datasets are displayed at the upper grid level, while detail datasets are placed at the lower grid level. But grid levels cannot display data themselves. Grid Views are responsible for drawing data in a specific form (Table Views, Card Views, etc.), for connecting to data storage and editing its data. To get more information, refer to the Views topic. For a View to be displayed, it must be associated with a level.
But levels are not only used to create master-detail relationships, they can present information from independent data sources in a single grid control, as well.
Structure Navigator
When your grid control is placed onto a form, it already contains a grid level (TcxGridLevel) and a data-aware Table View (TcxGridDBTableView), by default.
The Structure Navigator, at the right bottom corner of the component, describes the grid level structure. If the Structure Navigator is unnecessary, it can be hidden via the Structure Navigator menu item of the grid’s design-time context menu. Currently, the grid control shown above only contains one grid level (cxGrid1Level) with an associated data-aware Table View (cxGrid1DBTableView). To display the properties of the level or the Table View in the Object Inspector, click on the corresponding label in the Structure Navigator (alternatively, you can use the Object TreeView). The following image shows the Object Inspector displaying the properties of a grid level:
Every label provides an appropriate context menu, thus allowing you to customize the grid control further.
The context menu for a View label allows you to:
- Create All Columns
Creates columns based on the corresponding dataset fields. This option is available if a View is linked to an active dataset via the DataController.DataSource property.
- Delete All Columns
Destroys all columns within a View, if any.
- Delete View
Deletes the current View including all the columns it owns.
- Set As Default
This command stores the View’s OptionsBehavior, OptionsCustomize, OptionsData, OptionsSelection, OptionsView, and Filtering option sets in the system registry. Options are stored separately for each View type. These options are then used as the default for creating subsequent instances of the same View class.
- Edit Layout And Data…
Invokes the Layout and Data Editor dialog allowing you to customize the View’s layout (resize columns, specify the column’s width and visibility, group by specific columns, apply sorting, etc) and enter data to unbound Views. The View layout customization is especially useful when customizing detail Views. This menu item is disabled for server mode Views (TcxGridServerModeTableView and TcxGridServerModeBandedTableView).
- Customize Edit Form Layout…
Invokes the customization dialog that allows you to customize the in-place Edit Form‘s layout. This menu item is displayed only for Table Views (TcxGridTableView and TcxGridDBTableView), Banded Table Views (TcxGridBandedTableView and TcxGridDBBandedTableView), and server mode Views (TcxGridServerModeTableView and TcxGridServerModeBandedTableView) and only if the View’s OptionsBehavior.EditMode property is set to emInplaceEditForm or emInplaceEditFormHideCurrentRow.
- Edit via Wizard…
Invokes the grid configuration wizard that allows you to customize the View’s layout and enter data to unbound Views. This menu item is displayed for all Views except for Chart Views (Chart View and DB Chart View).
- Copy Settings from View
Provides a submenu containing a list of Views whose settings can be assigned to the selected View. This menu item is displayed if more than one View is created within the grid control.
The context menu for a level label provides the following options:
- Create View
Creates a new View within a grid control and assigns it to the current level. If the level already contains a View, the new View replaces the old one. The old View is not deleted from the grid View collection. The ExpressQuantumGrid provides several View types. DB Views work with datasets, while unbound Views work for unbound and provider modes.
- Add Level
Creates a new child grid level for the current level. Child levels are used to implement master-detail relationships. Each level can have multiple details linked by specific key field names.
- Delete Level
Deletes the current level.
The grid context menu contains only one option:
- Add Level
Adds a new grid level at the root nesting level for displaying data from another data source.
Component Editor
The Component Editor provides more capabilities than the Structure Navigator when adjusting a grid control. To open the Component Editor, do one of the following:
Press the Customize button in the Structure Navigator;
Double-click the grid control;
Select the Edit option from the grid context menu.
The Component Editor allows you to:
Access the properties of levels and Views;
Access the View collection (not only those assigned to levels);
Access collections of View elements (columns, bands, card rows, layout items, series, and data groups) and adjust their properties;
Change the element position within a View;
Specify summaries (for tabular Views).
The Component Editor has several panels. You can switch to a particular panel by clicking the corresponding tab.
The Structure panel is similar to the Structure Navigator and displays a tree-like structure of data. You can click each label with the left mouse button to display the properties of the corresponding object in the Object Inspector. When a View is selected, its items are listed within the right panel.
The context menus for the grid, level and View labels are the same as in the Structure Navigator.
The Structure panel contains two buttons:
- Add Level
Adds a child level to the selected grid or level. If a grid label is selected, the level is added at the root nesting level. If a level label is selected, a child level is created.
- Delete Level
Deletes the currently selected grid level.
The Views panel contains all the Views created in the grid.
Two buttons are provided:
- Add View
Adds a new View to the grid View collection. For a View to be displayed in a grid, it must be assigned to a level.
- Delete View
Deletes the currently selected View
- Edit View Layout and Data…
Invokes the Layout and Data Editor dialog which lets you customize the currently selected View’s layout and enter data (for the unbound Views only).
For Layout Views, the editor provides the advanced design-time customization page, and the layout preview page.
Depending on the View selected, the right pane displays the following panels:
For Table Views, the Columns and Summary panels are displayed;
For Banded Table Views, the right pane displays the Bands panel in addition to the Columns and Summary panels;
For Card Views, the Rows panel is displayed. This panel is equivalent to the Columns panel in Table and Banded Table Views;
For Layout Views and WinExplorer Views, the Items panel is displayed;
For Chart Views, the right pane displays the Series and DataGroups panels.
The Columns panel provides access to all the columns created. You can create a column manually by pressing the Add button. If a View is connected to an active dataset, it is possible to create columns for all dataset fields via the Retrieve Fields button.
When a column is created manually, you need to connect it to a dataset field by setting its DataBinding property attributes. When columns are created via the Retrieve Fields button, the DataBinding is set automatically.
Other buttons in the Columns panel implement the following operations:
- Delete
Deletes the selected column(s) from the View
- Restore Defaults
Restores the width, caption and other properties of the selected columns to their default values.
- Move Up
Moves the selected column(s) up the list
- Move Down
Moves the selected column(s) down the list
The Columns panel allows you to select several columns at once and adjust their properties via the Object Inspector. Use the Shift and Ctrl keys to select several columns. You can also change a column’s position by dragging it with the mouse.
The Bands panel allows you to manipulate bands in the same way as the Columns panel. You can create and delete bands and also arrange the order in which they are displayed (horizontal position).
The Summary panel allows you to specify summaries for a Table View. See the Summaries topic for details of the summary types provided by the ExpressQuantumGrid. The Create Summaries section shows how to set summaries at design-time and runtime.
There are individual pages in the Summary panel to specify footer and group summaries and to create summary groups for the selected View. The Footer page allows you to add footer summaries (summaries calculated against all records in a View).
The Add button adds a new summary item to the collection of footer summary items. A summary item defines on which column a summary should be calculated, the summary kind, position (in effect only for a group summary), format and a field name (for a DB View only). To adjust an item’s properties, just select it and switch to the Object Inspector window.
The Delete button deletes the item(s) currently selected.
ExpressQuantumGrid provides an extremely convenient way of specifying footer and group summaries for a particular column. All you need to do is select the column which you want to calculate a summary for and set its Summary property. By assigning the summary kind to calculate to the specific column’s property (Summary.FooterKind, Summary.GroupFooterKind and Summary.GroupKind) you automatically designate the summary type and the View element where the summary value will be displayed (a footer panel, group footer or group row, correspondingly). Use the FooterFormat, GroupFooterFormat and GroupFormat properties to customize the format of the resulting string for these summaries. For more information, see the Creating Summaries topic.
The Default For Groups page is similar to the Footer page. Here you can add a new summary item to the collection of default group summaries (summaries calculated against a group of records when data in a View is grouped by any column).
To calculate summaries when data is grouped by particular columns, use summary groups instead. You can access these via the Groups panel.
The Groups panel gives you the ability to create summary groups. A summary group associates individual grouping columns with specific group summaries. When data in a View is grouped by any of the grouping columns referenced by a summary group (these are linked columns), the corresponding group summaries are evaluated. It is possible to create multiple summary groups, each of which determines the set of group summaries to calculate when data is grouped by the corresponding (linked) columns.
The Groups panel contains the following lists:
- Groups
Shows the collection of all summary groups in the selected View.
- Items
Lists the summary items which determine the summaries to calculate. This panel is similar to the Items list in the Default For Groups panel.
- Unlinked Columns
Contains all the columns the selected View owns. This list allows you to select the columns associated with the summary items.
- Linked Columns
Specifies columns selected from the Unlinked Columns list. When data in a View is grouped by any of these columns, the summary items added via the Items list will be evaluated.