綁定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網格的編輯器模板

回答

相關問題