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 => create.Action("Create", "PayrollMarkup"))
        .Update(update => update.Action("Create", "PayrollMarkup"))
        .Destroy(destroy => destroy.Action("Delete", "PayrollMarkup"))
    ))

VIEW (StatesEditor.cshtml):

@model DropDown.Models.State
@{
    var shortName = "";
}
@if (Model != null)
{
    shortName = Model.ShortName;
}

@(Html.Kendo().DropDownList()
    .Name("State")
    .DataValueField("StateId")
    .DataTextField("ShortName")
    .Value(shortName)
    .BindTo((System.Collections.IEnumerable)ViewData["states"])
)

CONTROLLER (Index):

public ActionResult Index()
{
    var stateList = new List<State>();

    var state1 = new State { StateId = 1, ShortName = "CA" };
    stateList.Add(state1);

    var state2 = new State { StateId = 2, ShortName = "CT" };
    stateList.Add(state2);

    var state3 = new State { StateId = 3, ShortName = "MA" };
    stateList.Add(state3);

    var state4 = new State { StateId = 4, ShortName = "RI" };
    stateList.Add(state4);

    var state5 = new State { StateId = 5, ShortName = "TX" };
    stateList.Add(state5);

    var state6 = new State { StateId = 6, ShortName = "SC" };
    stateList.Add(state6);

    ViewData["states"] = stateList;

    return View();
}

CONTROLLER (Read):

public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
    var payrollMarkupList = new List<MarkupState>();

    var markup1 = new MarkupState()
    {
        PayrollMarkupId = 1,
        StateId = 1,
        State = "CA",
        MaintenancePercentage = (decimal?)1.1
    };
    payrollMarkupList.Add(markup1);

    var markup2 = new MarkupState()
    {
        PayrollMarkupId = 2,
        StateId = 2,
        State = "CT",
        MaintenancePercentage = (decimal?)3.2
    };
    payrollMarkupList.Add(markup2);

    var markup3 = new MarkupState()
    {
        PayrollMarkupId = 3,
        StateId = 3,
        State = "MA",
        MaintenancePercentage = (decimal?)8.5
    };
    payrollMarkupList.Add(markup3);

    return Json(payrollMarkupList.ToDataSourceResult(request));
}

MODEL (State.cs):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DropDown.Models
{
    public class State
    {
        public int StateId { get; set; }
        public string ShortName { get; set; }
    }
}

MODEL (MarkupState.cs):

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

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

This is a link to a test solution but I've provided all the code above.

Answer 1

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"])
)