外键列的 Kendo Grid ClientTemplate 未显示所选值？

Question

使用MVC，我正在尝试使用Foreign Key Column 实现Kendo Grid 的inline-editing...应该显示并保存从相关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 为 NULL。所以，我猜我需要那个部分的客户端模板……但这不起作用。

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 值设置到模型中

我尝试了各种其他已发布的解决方案...这是唯一有效的方法。

最终的 RAZOR 标记看起来像：

@(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);
    }
}