All Components
Theme

Themes

    Grid / Inline editing

    Description

    A common scenario is to toggle a grid cell into edit mode by simply clicking on the Edit row button, update the data inside the cell and save/discard the changes using the Update/Cancel buttons.

    This demo shows how this inline content management can be achieved using the data operations (create, update and destroy) of the Telerik MVC Grid component.

    All you have to do to enable the inline editing capabilities of the Grid is:

    • Turn on the inline cell editing by setting: .Editable(editable => editable.Mode(GridEditMode.InLine))
    • To enable insertion of new records, add the New Record button on the toolbar by adding: .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 inline editing capabilities of the MVC Grid see the help article here.

    ASP.NET MVC source

    Also available for:

    • editing_inline.cshtml
    • Editing_InlineController.cs
    • ProductService.cs

    Support & learning resources

    Grid for other technologies