[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Collapse]Grid View
    Main Features
    [Expand]Binding to Data
    [Expand]Data Representation Basics
    [Expand]Data Shaping and Manipulation
    [Expand]Focus and Navigation
    [Collapse]Data Editing and Validation
      Data Editing
      Edit Modes
      Edit Form
      Batch Edit
      Validate Data
      Initializing New Rows
   [Expand]Visual Elements
   [Expand]Member Tables
  [Expand]Tree List
  [Expand]Card View
  [Expand]Pivot Grid
   Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[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 built-in Edit Form is one of the ASPxGridView editing modes that allows end-users to edit column values within grid cells. The Edit Form is displayed when the Edit command button is clicked. You can specify edit cell visibility, position and appearance within the Edit Form. This topic describes how to manipulate edit forms, and customize their layout and appearance using style settings and templates.

Expanded Overview

To allow end-users to edit data using the built-in Edit Form, enable the data edit functionality and set the ASPxGridViewEditingSettings.Mode (using GridViewSettings.SettingsEditing.Mode) property to GridViewEditingMode.EditForm, GridViewEditingMode.EditFormAndDisplayRow or GridViewEditingMode.PopupEditForm.

The Edit Form is displayed in the image below.


The Edit Form displays Edit Cells that correspond to data columns, and the Cancel/Update commands that allow end-users to discard changes or save them to a database.

Each edit cell displays a column caption and a corresponding editor. Individual columns provide settings for individual edit cells, which allow you to provide various Edit Form layouts. If you wish to use a custom layout rather one the one produced by default, compose a template using the GridViewSettings.SetEditFormTemplateContent method.

These settings are listed in the table below.

Property Description
GridColumnEditFormSettings.CaptionLocation Specifies column caption location.
GridColumnEditFormSettings.Visible Specifies edit cell visibility. If this property is set to 'Default', then edit cell visibility depends on the visibility of the data column to which it corresponds.
GridColumnEditFormSettings.VisibleIndex Specifies the edit cell position among other edit cells within the Edit Form.
GridColumnEditFormSettings.ColumnSpan Specifies the number of edit form columns that the cell spans.
GridColumnEditFormSettings.RowSpan Specifies the number of edit form rows that the edit cell spans.

To access these settings, use the column's GridViewDataColumn.EditFormSettings property.

Expanded Customizing an Edit Form using Style Settings

You can customize command cells using the common style settings for the entire command column with the GridViewStyles.CommandColumn property (using GridViewSettings.Styles.CommandColumn), as shown in the code sample below.

The image below illustrates the result.

Expanded Customizing an Edit Form using Templates

The GridView provides the GridViewSettings.SetEditFormTemplateContent method used to set a template to render its edit form. This allows you to change the look and feel of the edit form.

The code sample below demonstrates how to define a template for the edit form. In this example, all data editors are organized in a single column using the FormLayout extension. FormLayout automatically adds the required marks to the captions of the required fields.

Partial View code ("GridViewPartial"):

Controller code ("HomeController"):

Edit form partial View ("_EditFormPartial"):

The image below illustrates the result.

Expanded See Also

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