绑定 Kendo 网格的编辑器模板

Question

我在将自定义 EditorTemplate 连接到 MVC 5 应用程序中的网格时遇到困难。我有一个整数字段，它只接受 1 或 2 作为值。我不想使用标准的数字文本框或滑块控件，而是想使用按钮（通过 Bootstrap 的组按钮）将其连接起来。如果用户点击第一个按钮，该值应设置为1，否则应设置为2。

我遇到的问题是，当用户单击 "edit" 按钮时，"Level" 值永远不会应用于编辑器模板。模板显示如我所愿，但我不知道如何将所选值绑定回 Kendo 网格。当用户单击网格上的 "save" 按钮时，永远不会调用控制器操作。

如果我用标准 Kendo 控件（例如数字文本框或 Kendo 滑块）替换编辑器模板，它工作正常。

ViewModel

public class LotViewModel
{
   public int LotId { get; set; }
   [Display(Name = "Level")]
   [Range(1, 2)]
   [UIHint("LotLevel")]
   public int Level { get; set; }
}

查看

@(Html.Kendo().Grid<LotViewModel>()
  .Name("lotGrid")
  .Columns(columns =>
  {
    columns.Bound(x => x.LotId).Visible(false);
    columns.Bound(x => x.Level);
    columns.Command(command =>
    {
      command.Edit();
    }).Width(100);
  })
  .ToolBar(toolbar => toolbar.Create())
  .Editable(editable => editable.Mode(GridEditMode.InLine))
  .AutoBind(true)
  .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
      model.Id(m => m.LotId);
      model.Field(m => m.Level).DefaultValue(1);
    })
    .Read(update => update.Action("GetLots", "Lot"))
    .Create(update => update.Action("CreateLot", "Lot"))
    .Update(update => update.Action("UpdateLot", "Lot"))
  )
  )

编辑器模板：LotLevel

@model int
@{
   var levelOne = Model.Equals(1) ? "active btn-primary" : null;
   var levelTwo = Model.Equals(2) ? "active btn-primary" : null;

   var htmlField = ViewData.TemplateInfo.HtmlFieldPrefix;
 }

@Html.HiddenFor(model => model)
<div class="btn-group btn-group-@htmlField">
  <button type="button"
          class="btn btn-default @levelOne bool-@htmlField"
          onclick="javascript: setValue(this, 1);">
    Level 1
  </button>
  <button type="button"
          class="btn btn-default @levelTwo bool-@htmlField"
          onclick="javascript:setValue(this, 2);">
    Level 2
  </button>
</div>

<script>
  function setValue(button, level) {
    $('.btn-group-@htmlField button.active').removeClass('active btn-primary');
    $(button).addClass('active btn-primary');
    $('#@htmlField').val(level); // TODO: Set the value of the model here
  }
</script>

Answer 1

归结为绑定。编辑器模板在创建网格时实例化一次（使用空模型对象），然后隐藏。当您单击 "Edit" 时，编辑器被放置到 DOM 中，替换显示行，并且数据源对象中的值被绑定到编辑器模板中的输入（我认为是按名称）。对于标准或 kendo 输入，这会导致编辑器更新并显示正确的值。对于复杂的编辑器（或复杂的对象），绑定基本上会失败并且不会继续。

在您的情况下，您可以向网格的编辑事件添加事件处理程序，这将强制按钮在显示编辑器时更新为输入值。

绑定 Kendo 网格的编辑器模板

Binding an editor template for Kendo grid

mvc-editor-templates

kendo-grid

kendo-asp.net-mvc

asp.net-mvc-5