单元格离开编辑模式时，批处理网格单元格将从DropDownList中获取DataValueField

Question

What I want to do is display text for a company name in the drop down AND the cell (when it's not being edited), but have the ID of the company be the data that is passed back to the server when "Save" is clicked.

Everything works perfectly, except that when I click on the next cell to continue my edits (which causes the cell with the DDL to leave edit mode), the read only cell in its place displays the ID instead of the Company's name.

This picture illustrates what I mean:

Does anyone know a way to fix this or a different way to achieve the functionality that I need?

Editor Template

@(Html.Kendo().DropDownList()
.Name("Company")
.DataTextField("Name")
.DataValueField("EnterpriseID")
.BindTo((IEnumerable<BlueGrace.BlueShip.Business.Enterprise.EnterpriseChildListingItem>)ViewBag.RefCarrierLiabilityEnterpriseListing))

Controller (ViewBag population)

var enterpriseListing = Business.Enterprise.EnterpriseChildListing.Get(false, customIdentity.EnterpriseID, false).ToList();
        ViewBag.RefCarrierLiabilityEnterpriseListing = enterpriseListing;

View

    @(Html.Kendo().Grid(Model.GlobalDictionary.RefCarrierLiabilityModels)
        .Name("CarrierLiabilityDictionaryGrid")
    .Columns(columns =>
    {
        columns.Bound(item => item.CarrierName)
            .EditorTemplateName("RefCarrierListing").Width(250);
        columns.Bound(item => item.Company)
            .EditorTemplateName("RefCarrierLiabilityEnterpriseListing");
        columns.Bound(item => item.MaxLiability)
            .EditorTemplateName("RefCarrierLiabilityMaxLiability");
        columns.Bound(item => item.IsValueOfGoodsMaxLiability);
        columns.Command(command =>
        {
            command.Destroy();
        }).Width(100);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(i => i.RefCarrierLiabilityID);
            model.Id(i => i.RefCarrierID);
        })
        .Read(read => read.Action("GetCarrierLiabilities", "Dictionary"))
        .Create(create => create.Action("CreateCarrierLiabilities", "Dictionary"))
        .Update(update => update.Action("UpdateCarrierLiabilities", "Dictionary"))
        .Destroy(delete => delete.Action("DeleteCarrierLiabilities", "Dictionary"))
    )
)

Answer 1

The Grid provides a functionality called ForeignKey column which what you need I guess. Check this demo (change the source to .cshtml to see all you need to do).

columns.ForeignKey(p => p.EmployeeID, (System.Collections.IEnumerable)ViewData["employees"], "EmployeeID", "EmployeeName");

http://demos.kendoui.com/web/grid/foreignkeycolumn.html