Telerik Extensions for ASP.NET MVC

This help topic explains how to configure Telerik Grid for ASP.NET MVC to use Web Service editing.

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

Important

The editing feature of Telerik Grid for ASP.NET MVC is available only for ASP.NET MVC 2.0 or later. Make sure you are using the right version of Telerik.Web.Mvc.Dll.

Web Service Editing (View)

To enable the editing support you must perform the following steps:
  1. Define a command column for the "Edit" and "Delete" commands:
    CopyC#
    <%= Html.Telerik().Grid(Model)
            .Name("Grid")
            .Columns(columns =>
            {
                //Bound columns
                columns.Bound(c => c.ContactName);
                columns.Bound(c => c.Country);
                columns.Bound(c => c.BirthDay);
                //Command column with two commands
                columns.Command(commands => commands
                       .Edit()
                       .Delete())
            })
    %>
  2. If you want to enable inserting of new records configure the grid toolbar:
    CopyC#
    <%= Html.Telerik().Grid(Model)
            .Name("Grid")
            // -> ToolBar configuration
            .ToolBar(commands => commands.Insert())
            // <- end of ToolBar configuration
            .Columns(columns =>
            {
                columns.Bound(c => c.ContactName);
                columns.Bound(c => c.Country);
                columns.Bound(c => c.BirthDay);
                columns.Command(commands => commands
                       .Edit()
                       .Delete())
            })
    %>
  3. Specify the property which uniquely identifies the data record. This is required so the grid knows which record is being edited, updated or deleted. In this case of this example this key is the CustomerID property:
    CopyC#
    <%= Html.Telerik().Grid(Model)
            .Name("Grid")
            // -> DataKeys configuration
            .DataKeys(dataKeys => dataKeys.Add(c => c.CustomerID))
            // <-- end of DataKeys configuration
            .ToolBar(commands => commands.Insert())
            .Columns(columns =>
            {
                columns.Bound(c => c.ContactName);
                columns.Bound(c => c.Country);
                columns.Bound(c => c.BirthDay);
                columns.Command(commands => commands
                       .Edit()
                       .Delete())
            })
    %>
  4. Specify the web methods which will delete, insert or update the data records:
    CopyC#
    <%= Html.Telerik().Grid(Model)
            .Name("Grid")
            .DataKeys(dataKeys => dataKeys.Add(c => c.CustomerID))
            .ToolBar(commands => commands.Insert())
            .DataBinding(dataBinding => dataBinding
                //WebService binding
                .WebService()
                       //Web Method which returns data for grid binding
                       .Select("~/Models/Customers.svc/Select")
                       //Web Method which updates an existing record
                       .Update("~/Models/Customers.svc/Update")
                       //Web Method which inserts a new record
                       .Insert("~/Models/Customers.svc/Insert")
                       //Web Method which deletes an existing record
                       .Delete("~/Models/Customers.svc/Delete");
            )
            .Columns(columns =>
            {
                columns.Bound(c => c.ContactName);
                columns.Bound(c => c.Country);
                columns.Bound(c => c.BirthDay);
                columns.Command(commands => commands
                       .Edit()
                       .Delete())
            })
    %>

Web Service Editing (Web Service implementation)

After configuring the grid in the view we need to implement the web service methods which will bind the grid, insert, update and delete records. Let's assume there is a CustomerRepository class which retrieves data, inserts new records and updates and delete existing ones. The data object is Customer and is defined like this:
CopyCustomer
namespace Models
{
    using System;
    using System.ComponentModel.DataAnnotations;
    using System.Runtime.Serialization;

    [KnownType(typeof(Customer))] // <- Required for WCF serialization
    public class Customer
    {
        [Required]
        public string ContactName
        {
            get;
            set;
        }

        public string CustomerID
        {
            get;
            set;
        }

        [Required]
        public string Country
        {
            get;
            set;
        }

        [DataType(DataType.Date)]
        public DateTime BirthDay
        {
            get;
            set;
        }
    }
}
The Customer class is using the Required data annotation attribute which in turn is used for validation. Telerik Grid for ASP.NET MVC fully benefits from the validation support provided in ASP.NET MVC 2.
Important
All web service methods which will participate in Web Service editing and binding must return GridModel. The methods for updating, inserting and deleting must have an argument of the data item type (Customer in this case) which is called value. If using WCF the date item type must be decorated with the KnownType attribute.
Note
The CustomerRepository is used just for brevity. In real life it should be replaced with adequate repository implementation or other data access code (Linq to SQL, Entity Framework etc.)

Binding

To bind the grid we just need to return a new GridModel:
CopyC#
[OperationContract]
public GridModel Select(GridState state)
{
    return SessionCustomerRepository.All().AsQueryable().ToGridModel(state);
}

Inserting

To insert a new record we need to create a new data object (Customer in this case) and call the CustomerRepository. Then we need to rebind the grid by returning GridModel.
CopyC#
[OperationContract]
public GridModel Insert(GridState state, EditableCustomer value)
{
    SessionCustomerRepository.Insert(value);

    return SessionCustomerRepository.All().AsQueryable().ToGridModel(state);
}

Updating

To update an existing record call the CustomerRepository and rebind the grid:
CopyC#
[OperationContract]
public GridModel Update(GridState state, EditableCustomer value)
{
    SessionCustomerRepository.Update(value);

    return SessionCustomerRepository.All().AsQueryable().ToGridModel(state);
}

Deleting

To delete an existing record we need to find that record, remove it from the repository and rebind the grid:
CopyC#
[OperationContract]
public GridModel Delete(GridState state, EditableCustomer value)
{
    SessionCustomerRepository.Delete(value);

    return SessionCustomerRepository.All().AsQueryable().ToGridModel(state);
}