外键列的Kendo网格客户端模板不显示所选值？

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是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 MARKUP看起来像：

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