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

Popup editing

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • EDIT IN TELERIK REPL
  • Change Theme
    default

    Themes & Swatches

    SASS
    LESS
    Launch Theme Builder
    Default Theme
    • Main
    • Main Dark
    • Nordic
    • Ocean Blue
    • Purple
    • Turquoise
    Bootstrap Theme
    • Main
    • Main Dark
    • Nordic
    • Urban
    • Vintage
    Material Theme
    • Main
    • Arctic
    • Lime Dark
    • Main Dark
    • Nova
    Classic Theme
    • Main
    • Main Dark
    • Opal
    • Silver
HtmlHelper
TagHelper
Files:
editing_popup.cshtml
Editing_PopupController.cs
ProductService.cs
ProductViewModelGridPopUp.cs
Editing_Popup_TagHelper.cshtml

Also available for:

CLIENT-SIDE API SERVER-SIDE API

Description

In various scenarios there is a 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 window by configuring the Telerik for ASP.NET Core Grid as follows:

  • Activate the popup 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(); });
  • Declare the Create, Read, Update and Destroy action methods in the DataSource. These methods are responsible for the data items manipulation.
  • Specify a unique field in the Model as the DataSource.Model.Id

More about the Telerik Grid for ASP.NET Core Popup Editing

More about Telerik Grid for ASP.NET Core

Support & Learning Resources