Edit Form
- 5 minutes to read
The Edit Form allows end users to edit the grid’s cell values. It is available in the Table View and TreeList View.
Note
The Edit Form is available in optimized mode only.
End users should double-click a grid row to invoke the Edit Form:
Availability
Data editing is allowed if the DataViewBase.AllowEditing property is set to true and the DataViewBase.NavigationStyle property is set to GridViewNavigationStyle.Cell.
Individual columns provide the ColumnBase.AllowEditing property. The property’s default value is Default - the View controls the column’s behavior. Set this property to true or false to override the default behavior. For example, you can set the column’s ColumnBase.AllowEditing property to false to prevent an end user from changing its values.
Edit Form Overview
Use the TableView.EditFormShowMode / TreeListView.EditFormShowMode property to control the Edit Form‘s availability and location. The following table lists the available options:
| The EditFormShowMode property value | Description |
|---|---|
| EditFormShowMode.None | The Edit Form is disabled. |
| EditFormShowMode.Inline | The Edit Form is shown below the row that is being edited. |
| EditFormShowMode.InlineHideRow | The Edit Form replaces the row that is being edited. |
| EditFormShowMode.Dialog | The Edit Form is shown as a popup dialog window. |
To apply changes made in the Edit Form to the grid, an end user should click the Update button or press the Ctrl + Enter key combination. To discard unsaved changes, an end user should click the Cancel button or press the Esc key.
Set the TableView.EditFormPostMode / TreeListView.EditFormPostMode property to EditFormPostMode.Immediate to apply changes an end user makes in the Edit Form to grid cells. If this property is set to EditFormPostMode.Cached, the changes are applied only after they were saved.
If the Edit Form contains unsaved changes and the focus is moved away from it, you can display an optional confirmation dialog. To configure the confirmation dialog, use the TableView.EditFormPostConfirmation / TreeListView.EditFormPostConfirmation property.
Note
If you enabled the Edit Form, you cannot edit cell values with Inplace Editors. The following events are not raised:
Edit Form Customization
Editors within the Edit Form are arranged in rows from left to right. The Edit Form contains editors for all columns within the View. Each editor displays a caption to the left of the edit field. The caption contains the associated grid column’s display name. The following table describes the Edit Form customization tasks:
| Task | Approach |
|---|---|
| Change the number of editors displayed in the Edit Form‘s row | Specify the TableView.EditFormColumnCount/TreeListView.EditFormColumnCount property. |
| Exclude a specific column’s editor from the Edit Form | Set the corresponding column’s ColumnBase.EditFormVisible property to false. |
| Specify a custom editor caption | Use the ColumnBase.EditFormCaption property. |
| Adjust the column editor’s sizes within the Edit Form | Use the ColumnBase.EditFormColumnSpan and ColumnBase.EditFormRowSpan properties. |
Note
When the Edit Form in dialogue mode, you can specify its title using the TableView.EditFormCaptionBinding/TreeListView.EditFormCaptionBinding property.
The following example demonstrates the GridControl with a custom Edit Form:
<dxg:GridControl ItemsSource="{Binding Data}">
<dxg:GridControl.View>
<dxg:TableView EditFormColumnCount="2" EditFormShowMode="Inline" />
</dxg:GridControl.View>
<dxg:GridColumn FieldName="Name" EditFormCaption="Full Name:" EditFormColumnSpan="2" />
<dxg:GridColumn FieldName="Birthday" />
<dxg:GridColumn FieldName="City" />
<dxg:GridColumn FieldName="IsOccupied" EditFormVisible="False" />
<dxg:GridColumn FieldName="Visits" />
</dxg:GridControl>
The image below shows the result:
Editors Arrangement
Editors’ order in the Edit Form matches the corresponding grid columns’ order. The ColumnBase.EditFormVisibleIndex property allows you to customize the order of editors in the Edit Form.
The following table describes how the ColumnBase.EditFormVisibleIndex property affects the order of the editors in the Edit Form:
The ColumnBase.EditFormVisibleIndex property value | The corresponding editor’s position in the Edit Form |
|---|---|
0 (default) | The editor’s position is determined by the BaseColumn.VisibleIndex property value. |
Greater than 0 | The editor’s position is determined by the ColumnBase.EditFormVisibleIndex property value. |
To place an editor on a new edit form row, set the corresponding column’s ColumnBase.EditFormStartNewRow property to true.
The following example demonstrates the Edit Form with editors in a custom order:
<dxg:GridControl ItemsSource="{Binding Data}">
<dxg:GridControl.View>
<dxg:TableView EditFormShowMode="Inline" />
</dxg:GridControl.View>
<!-- Position of the corresponding editor is determined based on the visual index of the "Name" column -->
<dxg:GridColumn FieldName="Name" />
<!-- "City" editor is placed on a new row -->
<dxg:GridColumn FieldName="City" EditFormVisibleIndex="1" EditFormStartNewRow="True" />
<dxg:GridColumn FieldName="IsOccupied" EditFormVisibleIndex="3"/>
<dxg:GridColumn FieldName="Visits" EditFormVisibleIndex="2" />
<!-- Position of the corresponding editor is determined based on the visual index of the "Birthday" column -->
<dxg:GridColumn FieldName="Birthday" />
</dxg:GridControl>
The following image demonstrates the resulting order of the editors. The order of the Name and Birthday editors matches the order of the corresponding grid columns:
Appearance Customization
You can customize the Edit Form and editors nested in it. The following table lists template properties that affect the Edit Form‘s appearance and functionality:
Property | Description |
|---|---|
Specifies the Edit Form‘s appearance. | |
Specifies the appearance of the column’s editor in the Edit Form. |
The following example demonstrates the GridControl with a custom Edit Form. The SpinEdit editor is used for the Visits field:
<dxg:GridControl ItemsSource="{Binding Data}">
<dxg:GridControl.View>
<dxg:TableView EditFormShowMode="Inline">
<!-- Edit form displays Name, City and Visits properties. -->
<dxg:TableView.EditFormTemplate>
<DataTemplate>
<GroupBox Header="Custom Inline Edit Form" Margin="10" Padding="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="Full Name: " Grid.Row="0" Grid.Column="0" />
<dxg:EditFormEditor FieldName="Name" Grid.Row="0" Grid.Column="1" Margin="2" />
<TextBlock Text="City: " Grid.Row="1" Grid.Column="0" />
<dxg:EditFormEditor FieldName="City" Grid.Row="1" Grid.Column="1" Margin="2"/>
<TextBlock Text="Visits: " Grid.Row="2" Grid.Column="0" />
<dxg:EditFormEditor FieldName="Visits" Grid.Row="2" Grid.Column="1" Margin="2"/>
<StackPanel Grid.Row="3" Grid.Column="1" Orientation="Horizontal">
<dx:SimpleButton Content="Apply" Command="{Binding CommitCommand}" Margin="2"/>
<dx:SimpleButton Content="Cancel" Command="{Binding CancelCommand}" Margin="2"/>
</StackPanel>
</Grid>
</GroupBox>
</DataTemplate>
</dxg:TableView.EditFormTemplate>
</dxg:TableView>
</dxg:GridControl.View>
<dxg:GridColumn FieldName="Name" />
<dxg:GridColumn FieldName="City" />
<dxg:GridColumn FieldName="IsOccupied" />
<dxg:GridColumn FieldName="Visits">
<!-- Edit form displays a spin editor for the Visits field -->
<dxg:GridColumn.EditFormTemplate>
<DataTemplate>
<dxe:SpinEdit Name="PART_Editor"/>
</DataTemplate>
</dxg:GridColumn.EditFormTemplate>
</dxg:GridColumn>
<dxg:GridColumn FieldName="Birthday" />
</dxg:GridControl>
The following image demonstrates the result:
