[Solved] Binding custom radio buttons with MVVM

[ImNotTed]

I have an MVC5 application in which I have an editable grid. On the grid is a byte field named "Level" which only saves a value of either 1 or 2. When the grid is in display-mode, I would like it to say "Level 1" or "Level 2". When the grid is being edited, I would like to display radio buttons for the user. I believe MVVM is necessary in order to bind the field to the viewmodel. Could you help me wire this up so it will retrieve & update properly?

ViewModel

public class MasterLotViewModel
{
    public int MasterLotId { get; set; }

    [Display(Name = @"Master Lot")]
    [Range(1, 2)]
    [DataType("MasterLotLevel")]
    public byte Level { get; set; }

    [Display(Name = @"Start Date")]
    [DataType(DataType.Date)]
    [Required]
    public DateTime StartDate { get; set; }

    [Display(Name = @"End Date")]
    [DataType(DataType.Date)]
    public DateTime? EndDate { get; set; }
}

 Editor Template

@model byte

@Html.HiddenFor(model => model)

<input class="masterLotRadios" id="Level1" name="Level" type="radio" value="1">
<label for="Level1">Level 1</label>
<input class="masterLotRadios" id="Level2" name="Level" type="radio" value="2">
<label for="Level2">Level 2</label>

 Grid

@(Html.Kendo().Grid<MasterLotViewModel>()
    .Name("masterLotGrid")
    .Columns(columns =>
    {
      columns.Bound(x => x.MasterLotId).Visible(false);
      columns.Bound(x => x.Level).ClientTemplate("Level #: Level #");
      columns.Bound(x => x.StartDate);
      columns.Bound(x => x.EndDate);
      columns.Command(command => { command.Edit(); }).Width(100);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .AutoBind(true)
    .DataSource(dataSource => dataSource
      .Ajax()
      .ServerOperation(false)
      .PageSize(10)
      .Events(events => events.Error("errorHandler"))
      .Model(model =>
      {
        model.Id(x => x.MasterLotId);
        model.Field(m => m.Level).DefaultValue(1);
      })
      .Read(read => read.Action("GetMasterLots", "Lot").Data("formatMasterLotData"))
      .Create(create => create.Action("CreateMasterLot", "Lot").Data("formatNewMasterLotData"))
      .Update(update => update.Action("UpdateMasterLot", "Lot").Data("formatUpdateMasterLotData"))
    )
)

[Boyan Dimitrov]

Hello ImNotTed,

 

The check box does not provide out of the box an attribute or value of 1 or 2 depending on the current state.  I would suggest to use the change event of the check box and set the model value. 

 

The Checkbox template column and editing project shows how to modify the field value of the model when the state of the check box is changed. 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[ImNotTed]

My entire application is currently using the MVC ​wrappers. I'd hate to rewrite the way I'm generating grids just to ​make them work with radio buttons.

Could you provide a sample of a razor-friendly version of the two-way binding?

 

For the record, I've updated the EditorTemplate to use RadioButtonFor() calls. Everything works EXCEPT setting of the dirty flag if the radio button is changed.

@Html.RadioButtonFor(m => Model, (int)MasterLots.Level1, new { id = "Level1", name = "Level", @class="masterLotRadios"})
<label>Level 1</label>
@Html.RadioButtonFor(m => Model, (int)MasterLots.Level2, new { id = "Level2", name = "Level", @class = "masterLotRadios" })
<label>Level 2</label>

<script>
    $('.masterLotRadios').on('ifChecked', function (event) {
      $('#Level').val(this.value);
    });
</script>

[Boyan Dimitrov]

Hello ImNotTed,

I prepared a sample project following the provided code.

Could you please modify it in order to replicate the issue you are facing? 

Regards,
Boyan Dimitrov
Telerik

 

 

[ImNotTed]

I was able to use your code to get this all to work.

I was also trying to wire up Bootstrap Switch into the grid for some more vibrant radio buttons, but that doesn't appear to set the dirty flag for a modified radio option. I've disabled it for now, so I'm good. If my users complain, I'll look into that issue some more.

For the time being, I'm happy. Thank you!