剑道网格ClientTemplate的ForeignKey列没有显示选定的值？

Question

使用MVC，我试图实现inline-editing of a，Kendo Grid，使用Foreign Key Column...which应该显示并保存从它的相关ComboBox中选择的值。

编辑works...but时，它不会在更新行时显示选定的值。

• 我做错了什么？

我的视图控件看起来像：

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

我的动作看起来像：

是的，它将action...but称为DataUnitId为NULL。所以，我猜我需要那个不能工作的part...but的客户端模板。

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

我试过其他各种发布的solutions...this，这是唯一有效的方法。

最后的剃须刀标记看起来像：

@(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绑定到网格事件..。

.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);
    }
}