Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [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
    Overview - GridView
    Main Features - GridView
   [Collapse]Concepts
    [Expand]Binding to Data
    [Expand]Data Representation Basics
    [Expand]Focus and Navigation
    [Collapse]Data Editing and Validation
      Data Editing
      Edit Modes
      Edit Form
      Batch Editing
      Validation
      Initializing New Rows
    [Expand]Export Overview
   [Expand]Visual Elements
   [Expand]Examples
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Edit Form

This topic covers the main concepts of manipulating edit forms, including the customization of edit forms via style settings and templates.

Expanded Overview

To allow end-users to edit data using the built-in Edit Form, enable the data editing functionality and set the ASPxGridViewEditingSettings.Mode (via 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 allows you to provide various Edit Form layouts. The default layout is generated automatically. You can provide custom layouts for the Edit Form by composing a template using the GridViewSettings.SetEditFormTemplateContent method.

These settings are listed in the table below.

Property Description
GridColumnEditFormSettings.CaptionLocation Specifies the column caption's location.
GridColumnEditFormSettings.Visible Specifies the edit cell's visibility. If this property is set to 'Default', the edit cell's visibility depends on the visibility of the data column to which it corresponds.
GridColumnEditFormSettings.VisibleIndex Specifies the edit cell's 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 via the common style settings for the entire command column using the GridViewStyles.CommandColumn (via GridViewSettings.Styles.CommandColumn) property, as shown in the code sample below.

The image below illustrates the result.

Expanded Customizing an Edit Form using Templates

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

How would you rate this topic?​​​​​​​