Сетки Kendo ClientTemplate для столбца ForeignKey не отображают выбранное значение?

Question

Используя MVC, я пытаюсь реализовать inline-editing из Kendo Grid , используя Foreign Key Column ..., который должен отображать и сохранять выбранное значение из соответствующего ComboBox.

Редактирование работает ... но при обновлении строки не отображается выбранное значение.

• Что я делаю не так?

МОЙ ВИД КОНТРОЛЯ ВИДЕТСЯ, КАК:

@(Html.Kendo().Grid<RTUDeviceCustomRegisterModbus>()
              .Columns(columns =>
              {
                  columns.Bound(x => x.Id)
                      .Visible(false);
                  columns.Bound(x => x.RTUDeviceId)
                      .Visible(false);
                  columns.Bound(x => x.Register)
                      .Title("Register")
                      .Width(50);
                  columns.Bound(x => x.Description)
                      .Title("Description")
                      .Width(100);
                  columns.ForeignKey(x => x.DataUnitId, Model.DataUnits, "Id", "DataUnitName")
                      .ClientTemplate((@Html.Kendo().ComboBox()
                          .BindTo(Model.DataUnits)
                          .Name("ddlDataUnits_#=Id#")
                          .DataValueField("Id")
                          .DataTextField("DataUnitName")
                          .ToClientTemplate()).ToHtmlString())
                      .Title("Units")
                      .Width(50);
                  columns.ForeignKey(x => x.DataTypeId, Model.DataTypes, "Id", "DataTypeName")
                      .Title("Data Type")
                      .Width(50);
                  columns.Bound(x => x.DataTypeSize)
                      .Title("ASCII (size)")
                      .Width(50);
                  columns.Command(command => { command.Edit(); command.Destroy(); }).Width(100);
              })
              .Name("gridCustomRegisterModbus")
              .ToolBar(toolbar => toolbar.Create())
              .Editable(editable => editable.Mode(GridEditMode.InLine))
              .Sortable()
              .Scrollable()
              .BindTo(Model.RTUDeviceCustomRegisterModbuses)
              .DataSource(dataSource => dataSource.Ajax()
                                                  .ServerOperation(true)
                                                  .PageSize(50)
                                                  .Model(model => { model.Id(m => m.Id); })
                                                  .Create(update => update.Action("Create", "CustomRegisterModbus", new { Area = "Documents" }))
                                                  .Update(update => update.Action("Update", "CustomRegisterModbus", new { Area = "Documents" }))
                                                  .Destroy(update => update.Action("Destroy", "CustomRegisterModbus", new { Area = "Documents" }))
                                                  )
              .HtmlAttributes(new { @class = "", @style = "height: 400px;" }))

МОИ ДЕЙСТВИЯ СМОТРЕТЬ, КАК: Да, это вызывает действие ... но DataUnitId НЕДЕЙСТВИТЕЛЕН.Итак, я думаю, мне нужен шаблон клиента для этой части ... но это не работает.

public class CustomRegisterModbusController : BaseController
{
    #region <Actions>

    [HttpPost]
    public ActionResult Create([DataSourceRequest] DataSourceRequest request, RTUDeviceCustomRegisterModbus entity)
    {
        // It makes the call to CREATE...but the value of the ID is null

        return Json(new[] { entity }.ToDataSourceResult(request, ModelState));
    }

    [HttpPost]
    public ActionResult Update([DataSourceRequest] DataSourceRequest request, RTUDeviceCustomRegisterModbus entity)
    {
        // Do awesome stuff
        return Json(new[] { entity }.ToDataSourceResult(request, ModelState));
    }

    [HttpPost]
    public ActionResult Destroy([DataSourceRequest] DataSourceRequest request, RTUDeviceCustomRegisterModbus entity)
    {
        // Do awesome stuff
        return Json(new[] { entity }.ToDataSourceResult(request, ModelState));
    }

    #endregion
}

Answer 1

Ненавижу отвечать на свой вопрос, но вот он ...

• Мне нужен был метод на стороне клиента для обработки Grid.Save
• Этот метод устанавливает любое выбранное значение DROP DOWN LIST в модель

Я пробовал все виды других опубликованных решений ... это ЕДИНСТВЕННАЯ вещь, которая работала.

Финальная разметка бритвы выглядит так:

@(Html.Kendo().Grid<RTUDeviceCustomRegisterModbus>()
              .Columns(columns =>
              {
                  columns.Bound(x => x.Id)
                      .Visible(false);
                  columns.Bound(x => x.RTUDeviceId)
                      .Visible(false);
                  columns.Bound(x => x.Register)
                      .Title("Register")
                      .Width(50);
                  columns.Bound(x => x.Description)
                      .Title("Description")
                      .Width(100);
                  columns.ForeignKey(x => x.DataUnitId, Model.DataUnits, "Id", "DataUnitName")
                      .Title("Units")
                      .Width(50);
                  columns.ForeignKey(x => x.DataTypeId, Model.DataTypes, "Id", "DataTypeName")
                      .Title("Data Type")
                      .Width(50);
                  columns.Bound(x => x.DataTypeSize)
                      .Title("ASCII (size)")
                      .Width(50);
                  columns.Command(command => { command.Edit(); command.Destroy(); }).Width(100);
              })
              .Name("gridCustomRegisterModbus")
              .ToolBar(toolbar => toolbar.Create())
              .Editable(editable => editable.Mode(GridEditMode.InLine))
              .Sortable()
              .Scrollable()
              .BindTo(Model.RTUDeviceCustomRegisterModbuses)
              .DataSource(dataSource => dataSource.Ajax()
                                                  .ServerOperation(true)
                                                  .PageSize(50)
                                                  .Model(model => { model.Id(m => m.Id); })
                                                  .Create(update => update.Action("Create", "CustomRegisterModbus", new { Area = "Documents" }))
                                                  .Update(update => update.Action("Update", "CustomRegisterModbus", new { Area = "Documents" }))
                                                  .Destroy(update => update.Action("Destroy", "CustomRegisterModbus", new { Area = "Documents" }))
                                                  )
              .HtmlAttributes(new { @class = "", @style = "height: 400px;" }))

МЕТОД JAVASCRIPT СМОТРИТ, КАК:
Конечно, вы, вероятно, поместите метод в свой собственный класс контроллера

Если вы используете Razor для привязки к событию GRIDS ...

.Events(events => events.Save("onSave"))

Если вы используете пользовательский контроллер JavaScript для привязки события ...

// Instances
var grid = $('#mygrid').data('kendoGrid');

// Bindings
grid.bind('save', onSave);

// Of course you would point to a custom Object
function onSave(e) {

    var model = e.model;
    var ddl = null;
    var text = null;

    // DataUnits
    ddl = $(e.container.find('[data-role=dropdownlist]')[0]).data('kendoDropDownList');
    text = ddl.value();

    if (text !== null && text.length > 0) {
        //model.DataUnitId = 0;
        model.set('DataUnitId', text);
    }

    // DataTypes
    ddl = $(e.container.find('[data-role=dropdownlist]')[1]).data('kendoDropDownList');
    text = ddl.value();

    if (text !== null && text.length > 0) {
        //model.DataTypeId = 0;
        model.set('DataTypeId', text);
    }
}