This example shows how to use display and edit templates with Telerik Grid for ASP.NET MVC. There are a few built-in templates for Date, Currency and Number editing which can be found in the EditorTemplates folder in the installation.

It is important to know that display templates are supported only in server binding scenarios. Editor templates are supported in client binding scenarios provided that there is an HTML element whose name attribute is the same as the property name of the bound field.

To use custom edit and display templates you should do the following:

1. Decorate your model with metadata attributes to specify its data type, UI hint (name of the ASCX to use) etc:

       public class EditableOrder
       {
           [ReadOnly(true)]
           public int OrderID { get; set; }
   
           // DisplayTemplates/Employee.ascx will be used as display template.
           // EditorTemplates/Employee.ascx will be used as editor template
           [UIHint("Employee"), Required]
           public Employee Employee { get; set; }
   
           // EditorTemplates/Date.ascx will be used as display template.
           [DataType(DataType.Date), Required]
           public DateTime OrderDate { get; set; }
   
           [DataType(DataType.Currency), Required]
           public decimal Freight { get; set; }
       }
   

2. Create a DisplayTemplates and EditorTemplates folders in under your Views and create the required ASCX files. Here is how the Employee.ascx editor and display templates look like:
   DisplayTemplates/Employee.ascx

   <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Employee>" %>
   <%= Html.Encode(Model.FirstName) %> <%= Html.Encode(Model.LastName) %>
   

   EditorTemplates/Employee.ascx

   <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Employee>" %>
   <%= Html.DropDownList(null, new SelectList((IEnumerable) ViewData["employees"], 
               "Id", "Name", Model.EmployeeID.ToString()))%>