New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Popup editing

Loading Demo...
  • Edit in Theme Builder
  • editing_popup.cshtml
  • Editing_PopupController.cs
  • ProductService.cs

Also available for:



In various scenarios there is requirement to not only visualize tabular data, but also allow the ability to the edit the rows content in a popup edit form. In this demo you can edit or insert new items via a popup form by configuring the Telerik MVC Grid component as follow:

  • Activate the popup cell editing by setting: .Editable(editable => editable.Mode(GridEditMode.PopUp))
  • To enable insertion of new records, add the New Record button on the toolbar: .ToolBar(toolbar => toolbar.Create())
  • To enable the Edit and Delete commands on each row, insert a new column: columns.Command(command => { command.Edit(); command.Destroy(); });
  • Invoke the Create, Read, Update and Destroy action methods in the DataSource. These methods are responsible for the data items manipulation.

For more details about the editing capabilities of the MVC Grid see the help article here.

Support & Learning Resources