Custom Editor Template for Grid

[ImNotTed]

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.

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.

If I replace the editor template with a standard Kendo control such as a numeric text box or Kendo slider, it works fine.

ViewModel

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

 
View

@(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 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>

[Georgi Krustev]

Hi,

In general, Kendo UI Grid uses MVVM bindings to wire the edited model to the editor UI elements. As the default MVVM bindings does not handle binding to a buttons group, you will need to implement a custom MVVM binding that will select the correct button on initial load (refresh method) and will update the model value on change (wire the click of the buttons and update the model value). You can find more details about the custom MVVM bindings here:

• http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom

Regards,
Georgi Krustev
Telerik