绑定Kendo网格的编辑器模板

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

我遇到的问题是，当用户单击“编辑”按钮时， “级别”值永远不会应用于编辑器模板。模板显示为我想要的，但我无法弄清楚如何将选定的值绑定回Kendo网格。当用户点击网格上的“保存”按钮时，控制器操作从不被调用。

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

视图模型

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")) 
) 
)

EditorTemplate：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 [email protected]"> 
    <button type="button" 
      class="btn btn-default @levelOne [email protected]" 
      onclick="javascript: setValue(this, 1);"> 
    Level 1 
    </button> 
    <button type="button" 
      class="btn btn-default @levelTwo [email protected]" 
      onclick="javascript:setValue(this, 2);"> 
    Level 2 
    </button> 
</div> 

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

来源

2015-04-02 Rethic

它归结到B inding。当网格被创建并且隐藏时，编辑器模板被实例化一次（具有空的模型对象）。当你点击“编辑”时，编辑器被放置到DOM中，替换显示行，并且dataSource对象中的值被绑定到编辑器模板中的输入（按照名称，我认为）。使用标准或kendo输入时，这会导致编辑器更新并显示正确的值。用一个复杂的编辑器（或一个复杂的对象），绑定本质上是失败的，不会再进一步。

在你的情况下，你可以添加一个事件处理程序到网格的编辑事件，当显示编辑器时强制按钮更新到输入值。

来源

2015-09-08 18:38:33 PleasantD

绑定Kendo网格的编辑器模板

回答

相关问题