Telerik Extensions for ASP.NET MVC

Version Q1 2012, released 04/19/2012

Web Service Editing

Edit mode


Button type

Bound to WCF Web Service

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 web service 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
            .WebService()
                .Select("~/Models/Products.svc/Select")
                .Update("~/Models/Products.svc/Update")
                .Insert("~/Models/Products.svc/Insert")
                .Delete("~/Models/Products.svc/Delete");
        )
        .Columns(columns =>
        {
            //omitted for brevity
        })

Get more than expected!

Take the Telerik Extensions for ASP.NET MVC to your Visual Studio projects to truly experience their power. Download your free copy now and jumpstart your development with the available learning resources.

The Extensions are offered in both open source and commercial versions the differences between which are well explained in the licensing FAQ.

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

Other Demos: