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]ASP.NET Core 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]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Data Editing

The ASP.NET MVC GridView provides built-in data editing functionality. This topic describes how to enable data editing operations within the GridView.

Note

Requirements.

To follow the steps described in this topic, you will need a data-bound GridView extension in your project.

Expanded Enabling Data Editing within the GridView

You can enable data editing operations within your GridView in the following way.

  1. Add the controller action method that will add new records to a data source.

    This controller action method obtains a newly added object as a parameter. The action method should implement the functionality to add a new record and return the GridView's Partial View.

    Controller code ("HomeController"):

  2. Add the controller action method that will save the updated records to a data source.

    This controller action method obtains an edited object as a parameter. The action method should implement the functionality to update records and return the GridView's Partial View.

    Controller code ("HomeController"):

  3. Add the controller action method that will delete existing records from a data source.

    This controller action method obtains the key value of the record to delete. The action method should implement the functionality to delete records and return the GridView's Partial View.

    Controller code ("HomeController"):

  4. Define the callback route values within the PartialView.

    Navigate to the Partial View that contains the GridView code. In the grid settings, define the callback route values to the action methods (created above), which will handle grid callbacks for adding, updating and deleting records.

    Partial View code ("_GridViewPartial"):

  5. Enable the command column and command items.

    To allow end-users to manipulate grid data, add a command column to the grid's column collection and specify which commands (New, Edit, Delete, Update, Cancel) can be used by end-users. To switch a grid row to edit mode, end-users should be allowed to click the Edit command.

    Partial View code ("_GridViewPartial"):

    Note that in addition to the built-in edit form, you can add, edit and delete grid records using the grid's client-side API.

Expanded Editing GridView via the Client-Side API

GridView provides a full-featured client-side API that allows you to manipulate the edit form via JS code. The table below lists the available data editing-related methods.

Method Description
ASPxClientGridView.AddNewRow (via MVCxClientGridView.AddNewRow) Adds a new record.
ASPxClientGridView.StartEditRow (via MVCxClientGridView.StartEditRow) Opens an edit form for editing a specified row.
ASPxClientGridView.StartEditRowByKey (via MVCxClientGridView.StartEditRowByKey) Opens an edit form for editing a row with the specified key.
ASPxClientGridView.SetEditValue (via MVCxClientGridView.SetEditValue) Sets the value of the specified edit cell.
ASPxClientGridView.IsNewRowEditing (via MVCxClientGridView.IsNewRowEditing) Indicates whether or not a new row is being edited.
ASPxClientGridView.IsEditing (via MVCxClientGridView.IsEditing) Indicates whether or not the GridView extension is in edit mode.
ASPxClientGridView.UpdateEdit (via MVCxClientGridView.UpdateEdit) Saves all changes made and switches the GridView extension to browse mode.
ASPxClientGridView.CancelEdit (via MVCxClientGridView.CancelEdit) Cancels all changes made and switches the GridView extension to browse mode.
ASPxClientGridView.DeleteRow (via MVCxClientGridView.DeleteRow) Deletes the specified row.
ASPxClientGridView.DeleteRowByKey (via MVCxClientGridView.DeleteRowByKey) Deletes a row with the specified key value.

Example

In this example, the ASPxClientGridView.RowDblClick (via MVCxClientGridView.RowDblClick) client-side event is handled to switch the GridView to edit mode by double-clicking a data row. The event handler calls the ASPxClientGridView.StartEditRow (via MVCxClientGridView.StartEditRow) method. This method receives the visible index of the double-clicked row and invokes an edit form.

Expanded See Also

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