New to Telerik UI for ASP.NET Core? Download free 30-day trial
ASP.NET Core Grid Popup Editing
- EXAMPLE
- VIEW SOURCE
-
Change Theme
defaultDefault Theme
- Main
- Main Dark
- Nordic
- Ocean Blue
- Ocean Blue A11Y
- Purple
- Turquoise
Bootstrap Theme- Main
- Bootstrap 3
- Bootstrap 3 Dark
- Main Dark
- Nordic
- Turquoise
- Turquoise Dark
- Urban
- Vintage
Material Theme- Main
- Arctic
- Lime Dark
- Main Dark
- Nova
Classic Theme- Main
- Green
- Green Dark
- Lavender
- Lavender Dark
- Main Dark
- Metro
- Metro Dark
- Moonlight
- Opal
- Opal Dark
- Silver
- Silver Dark
- Uniform
Fluent Theme- Main
Also available for:
CLIENT-SIDE API SERVER-SIDE APIDescription
Some scenarios require the Telerik UI for ASP.NET Core Data Grid not only to visualize data in a table structure, but also to support editing of its row content in a popup edit form.
This demo shows how to edit or insert new Data Grid items through a popup window by configuring the component in the following way:
- Activate the popup editing by setting
.Editable(editable => editable.Mode(GridEditMode.PopUp))
. - To allow the insertion of new records, add the New Record button to the toolbar of the component—
.ToolBar(toolbar => toolbar.Create())
. - To enable the Edit and Delete commands for each row, insert a new column—
columns.Command(command => { command.Edit(); command.Destroy(); });
. - Declare the
Create
,Read
,Update
, andDestroy
action methods in the DataSource. These methods are responsible for the manipulation of the data items manipulation. - Specify a unique field in the
Model
as theDataSource.Model.Id
.
For more information about the editing capabilities, refer to the official Telerik UI for ASP.NET Core Data Grid product documentation on the available popup editing approaches.