View Layout
- 5 minutes to read
ExpressQuantumGrid gives you the ability to customize a View’s layout and enter data (for unbound (Banded) Table and Card Views only) at design time. In this section we will consider customizing the View’s layout. For more information about entering data into unbound (non data-aware) Views at design time, see the Data Editing topic.
In order to customize the View’s layout, the “Layout and Data Editor“ dialog is used. Click the “Edit Layout and Data…“ item of the View’s context menu to invoke this dialog. Note that for Chart Views this dialog only lets you preview their appearance in a form. That is the following information relates to (Banded) Table and Card Views only.
Also you can select a specific View from the Views panel in the Component Editor and click the Edit View Layout and Data… button to invoke the corresponding dialog.
You can customize a View directly on the form. When a grid displays a master-detail relationship, you can expand a specific master row and this will open a clone View that corresponds to the selected row. The EQGrid allows you to set up the layout of individual clones which will result in the immediate modification of the corresponding pattern View and all of the created clone Views.
The Layout and Data Editor gives you the ability to customize any grid View: master, detail and even Views not currently connected to any grid level (for instance, those that are created within a TcxGridViewRepository component). When you edit the layout of a detail View, these changes are then applied to all View clones.
For (Banded) Table Views, you are able to:
specify the grouping order
apply sorting to columns
resize columns and change their position
hide specific columns (this sets their Visible property to False)
arrange bands (for Banded Table Views only)
The Layout and Data Editor contains the “Save layout“ checkbox and three buttons:
- The Columns Customization button (Rows Customization for Card Views)
Activates the Customization form and this displays hidden columns and bands (for Banded Table Views only). When the Customization form is visible, you can drag any column off the column header panel and this will remove the column from the View. Hiding a column in the Customization form sets its Visible property to False and vice versa. You will see a hidden column in the Customization form unless its VisibleForCustomization property is set to False. To display the Customization form at runtime, set the View’s Controller.Customization property to True.
You can bring a specific column back to the View by dragging it from the Customization form onto the column header panel. Similarly, you work the same way with bands in a Banded Table View.
- The Ok button
Applies layout changes to a grid View on the form (only when the ‘Save layout’ checkbox is checked) and closes the dialog.
- The Cancel button
Discards any changes made to the layout and closes the dialog.
For unbound Views, the ‘Save data‘ checkbox is also displayed. See the Data Editing section for additional information as this checkbox is used to indicate whether the data for an unbound View will be saved when you click the Ok button.
Grouping
To group by a specific column, drag its header onto the Group panel. The panel is visible if the View’s OptionsView.GroupByBox property is set to True. The Group panel displays all columns used to group data:
Moving a column to the Group panel sets its Visible property to False.
Sorting
To sort by a specific column, click its header. The first click on a column header sorts data in ascending order and the second in descending order, etc. To clear sorting by a column, click the column’s caption whilst holding the Ctrl key down.
You can also sort data by multiple columns. To do this, click on column headers while holding down the Shift key.
The current sort order is indicated by a small arrow which is displayed adjacent to the right column header’s edge. The Up arrow indicates ascending order, while the Down arrow indicates descending order.
Note, that grid columns used for grouping are always sorted.
Resizing columns
You can change the width of a column by dragging its right edge:
If you need to set a column’s width according to the size of its contents, double-click its right edge. This will find the cell with the widest contents and the column’s width will then be changed to accommodate it. At runtime, use the ApplyBestFit method to get the same effect.
Moving columns
To change the order of columns within the View, drag the column header to the required position. You can change the column’s position within the View and within the Group panel.
For Card Views, the Layout editor allows you to change the card’s width.
To specify the card’s width, click and drag the vertical separator line to the left or right.
When the LayoutDirection property of the Card View is set to ldVertical, a Card View displays only horizontal separator lines. In this case, click the space between two adjacent horizontal cards to change their widths.
Customizing bands
Similar to operations with columns, bands can be easily moved, resized and arranged within the View as nested bands.
