Assigning Editors to Editor Rows

• Aug 02, 2022
• 3 minutes to read

Editor rows in the ExpressVerticalGrid control represent the data items. Every editor row represents data items of a particular type. The natural way of assigning editors to the ExpressVerticalGrid rows is to bind an appropriate editor to the row for editing a particular type of row’s data item (note that MultiEditor rows differ in this point, since they can display different types of data items).

There are two ways to assign editors used for editing a row’s data item: using the TcxEditRepository component or the Properties.EditProperties. This topic explains how to bind an editor to the row using the Properties.EditProperties property at design- and runtime.

Assigning Editors at Design Time

This example binds the editor row to the cxImage editor.

1. Double-click the vertical grid control to invoke the Row collection editor.

2. Select the editor row to display its properties. Expand the Properties member.

3. Choose cxImage from the Properties.EditProperties combo box. This associates the Properties.EditProperties property with a TcxImageProperties class containing properties specific to image editors.

4. Expand the Properties.EditProperties entry within the Object Inspector and modify the assigned editor as required.

5. Run the application.

&160;#

Assigning Editors at Runtime

This section shows how to assign an editor to a row using code. The first step is to initialize the Properties.EditPropertiesClass property with the required class name. The second step is to set up the editor assigned.

The following code assigns an image editor to the Picture row bound to a data field, containing the car photo:

//...
cxDBVerticalGridPicture.Properties.EditPropertiesClass := TcxImageProperties;
with TcxImageProperties(cxDBVerticalGridPicture.Properties.EditProperties) do
begin
  GraphicClassName := 'TJPEGImage';
  Stretch := True;
end;
//...

The result is shown in the following screenshot:

You can specify one editor for displaying data and another editor for editing data within a cell. This is implemented by handling the Row.OnGetEditingProperties and Row.OnGetEditProperties events. These events provide an AProperties parameter that allows you to specify the editor properties class containing settings for the in-place editor. Parameter settings cannot be changed directly. A repository item of the required type must be created instead and then its Properties member can be assigned to the AProperties parameter. This technique is illustrated in the RowsMultiEditorsDemo application shipped with the ExpressVerticalGrid.

This demo shows how to assign two different editors to the erCarImage editor row displaying the image. When data is displayed at runtime, the editor properties are set to TcxImageProperties, and data editing is delegated to TcxBlobEditProperties.

The required repository items settings are shown in the following images:

The following code specifies the editor properties for the erCarImage row via the Row.OnGetEditingProperties and Row.OnGetEditProperties event handlers.

procedure TRowsMultiEditorsDemoMainForm.erCarImagePropertiesGetEditingProperties(
  Sender: TcxCustomEditorRowProperties; ARecordIndex: Integer;
  var AProperties: TcxCustomEditProperties);
begin
  AProperties := erepCarPictEditing.Properties;
end;
procedure TRowsMultiEditorsDemoMainForm.erCarImagePropertiesGetEditProperties(
  Sender: TcxCustomEditorRowProperties; ARecordIndex: Integer;
  var AProperties: TcxCustomEditProperties);
begin
  AProperties := erepCarPictEdit.Properties;
end;

The following screenshots illustrate the result:

Result	Example
The erCarImage row is in display mode
The erCarImage row is in edit mode