[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Implementation Details
   [Expand]Views
   [Expand]Grid View Data Layout
   [Expand]Binding to Data
   [Expand]Master-Detail Data Representation
   [Collapse]Data Editing and Validation
     Add and Remove Rows
    [Collapse]Modify Cell Values
      Obtain and Set Cell Values in Code
      In-place Editors
      Edit Form
    [Expand]Input Validation
    [Expand]Clipboard Management
     Examples
   [Expand]Grouping
   [Expand]Selection
   [Expand]Filtering and Searching
   [Expand]Sorting
   [Expand]Data Summaries
   [Expand]Paging and Scrolling
   [Expand]Focus and Navigation
   [Expand]Conditional Formatting
   [Expand]Drag-and-Drop
   [Expand]Appearance Customization
   [Expand]MVVM Enhancements
   [Expand]Printing and Exporting
   [Expand]End-User Interaction
   [Expand]Miscellaneous
   [Expand]Performance Improvement
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]End-User Capabilities
   [Expand]Examples
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Edit Form

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:

Use the TableView.EditFormShowMode (or 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.
Note

The Edit Form uses only optimized templates. The template for the New Item Row shown at the top of the view is not optimized. Do not set the TableView.NewItemRowPosition property to NewItemRowPosition.Top if the EditFormShowMode property is set to EditFormShowMode.Inline or EditFormShowMode.InlineHideRow.

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.

Expanded 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:

The image below shows the result:

Expanded 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:

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:

Expanded 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

TableView.EditFormTemplate/TreeListView.EditFormTemplate

Specifies the Edit Form's appearance.

ColumnBase.EditFormTemplate

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:

The following image demonstrates the result:

Is this topic helpful?​​​​​​​