Adding an EditorTemplate to a Kendo Grid

Question

I'm trying to add an `EditorTemplate` to my Kendo grid, which I've been able to do. The problem that I'm having is, when I go into edit mode, the dropdownlist is automatically going to the first item in the list instead of the item that it should be editing. VIEW (`Index.cshtml`): ``` @(Html.Kendo().Grid<DropDown.Models.MarkupState>() .Name("PayrollMarkupGrid") .Columns(columns => { columns.Bound(p => p.PayrollMarkupId).Hidden(true); columns.Bound(p => p.StateId).Hidden(true); columns.Bound(p => p.State).Width(80); columns.Bound(p => p.MaintenancePercentage).Title("Maint. %").Width(80); columns.Bound(p => p.OfficePercentage).Title("Office %").Width(80); columns.Command(command => { command.Edit(); command.Destroy(); }).Title("Actions"); }) .ToolBar(toolbar => toolbar.Create()) .Selectable(selectable => selectable.Mode(GridSelectionMode.Single)) .DataSource(dataSource => dataSource .Ajax() .Model(model => model.Id(p => p.State)) .Read(read => read.Action("Read", "Home")) .Create(create…

Accepted Answer

Set the StateId to be the visible column, and use ClientTemplate to display the "State" field:

```
columns.Bound(p => p.StateId).Width(80).ClientTemplate("#=State#");
columns.Bound(p => p.State).Hidden(true);
```

Set the custom EditorTemplate to the "StateId" field in the model:

```
public class MarkupState
{
    public int PayrollMarkupId { get; set; }
    public string State { get; set; }
    [UIHint("StatesEditor")]
    public int StateId { get; set; }
    public decimal? MaintenancePercentage { get; set; }
    public decimal? OfficePercentage { get; set; }
}
```

Modify the EditorTemplate in the following way:

```
@model int?

@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("StateId")
    .DataTextField("ShortName")
    .BindTo((System.Collections.IEnumerable)ViewData["states"])
)
```

Adding an EditorTemplate to a Kendo Grid

Solution

Problem