Telerik Extensions for ASP.NET MVC

Version Q2 2012, released 06/07/2012

Ajax Editing

Edit mode


Button type

Insert row position

About this example ASPXRazor

This example shows the in-line data editing feature of Telerik Grid for ASP.NET MVC. In this example the grid is using ajax binding.

To enable editing you need perform the following:

  1. Define a command column for the "Edit" and "Delete" commands: 
    <%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ContactName).Width(360);
            columns.Bound(c => c.Country).Width(120);
            columns.Bound(c => c.Address).Width(200);
            columns.Bound(c => c.BirthDay).Width(130).Format("{0:d}");
            columns.Command(commands =>
            {
                commands.Edit();
                commands.Delete();
            }).Width(200);
            
        })
%>
  2. If you want to enable inserting of new records configure the grid toolbar: 
    <%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .ToolBar(commands => commands.Insert())
        .Columns(columns =>
        {
            //omitted for brevity
        })
%>
  3. Specify the property which uniquely identifies the data record. In this case it is CustomerID: 
    <%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .ToolBar(commands => commands.Insert())
        .DataKeys(keys => keys.Add(c => c.CustomerID))
        .Columns(columns =>
        {
            //omitted for brevity
        })
  4. Specify the action methods which will delete, insert or save data records. 
    <%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .ToolBar(commands => commands.Insert())
        .DataKeys(keys => keys.Add(c => c.CustomerID))
        .DataBinding(dataBinding => dataBinding
            .Ajax()
                .Select("EditingServerSide", "Grid")
                .Insert("Insert", "Grid")
                .Update("Save", "Grid")
                .Delete("Delete", "Grid"))
        .Columns(columns =>
        {
            //omitted for brevity
        })

Interested in HTML5 and mobile-powered ASP.NET MVC apps?

Experience the next generation UI and framework for ASP.NET MVC development by downloading trial evaluation copy of Kendo UI Complete for ASP.NET MVC. Jumpstart your development with the available learning resources.

The differences between Telerik MVC Extensions and Kendo UI Complete for ASP.NET MVC, and their licensing models are explained here and here.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Other Demos: