title: Binding an editor template for Kendo grid
body: <p>I am having difficulties in wiring up a custom EditorTemplate to a grid within an MVC 5 application. I have an integer field that only accepts a 1 or 2 as a value. Rather than using a standard numeric text box or slider control, I'd like to wire this up using buttons (via Bootstrap's group buttons). If the user clicks on the first button, the value should be set to 1, otherwise it should be set to 2.</p>
  
  <p>The problem that I'm experiencing is that when the user clicks on the "edit" button, the "Level" value never gets applied to the editor template. The template displays as I'd like, but I cannot figure out how to bind the selected value back to the Kendo grid. When the user clicks on the "save" button on the grid, the controller action is never invoked.</p>
  
  <p>If I replace the editor template with a standard Kendo control such as a numeric text box or Kendo slider, it works fine.</p>
  
  <p><strong>ViewModel</strong></p>
  
  <pre><code>public class LotViewModel
  {
     public int LotId { get; set; }
     [Display(Name = "Level")]
     [Range(1, 2)]
     [UIHint("LotLevel")]
     public int Level { get; set; }
  }
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <pre><code>@(Html.Kendo().Grid&lt;LotViewModel&gt;()
    .Name("lotGrid")
    .Columns(columns =&gt;
    {
      columns.Bound(x =&gt; x.LotId).Visible(false);
      columns.Bound(x =&gt; x.Level);
      columns.Command(command =&gt;
      {
        command.Edit();
      }).Width(100);
    })
    .ToolBar(toolbar =&gt; toolbar.Create())
    .Editable(editable =&gt; editable.Mode(GridEditMode.InLine))
    .AutoBind(true)
    .DataSource(dataSource =&gt; dataSource
      .Ajax()
      .Model(model =&gt;
      {
        model.Id(m =&gt; m.LotId);
        model.Field(m =&gt; m.Level).DefaultValue(1);
      })
      .Read(update =&gt; update.Action("GetLots", "Lot"))
      .Create(update =&gt; update.Action("CreateLot", "Lot"))
      .Update(update =&gt; update.Action("UpdateLot", "Lot"))
    )
    )
  </code></pre>
  
  <p><strong>EditorTemplate: LotLevel</strong></p>
  
  <pre><code>@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 =&gt; model)
  &lt;div class="btn-group btn-group-@htmlField"&gt;
    &lt;button type="button"
            class="btn btn-default @levelOne bool-@htmlField"
            onclick="javascript: setValue(this, 1);"&gt;
      Level 1
    &lt;/button&gt;
    &lt;button type="button"
            class="btn btn-default @levelTwo bool-@htmlField"
            onclick="javascript:setValue(this, 2);"&gt;
      Level 2
    &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    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
    }
  &lt;/script&gt;
  </code></pre>