This is a migrated thread and some comments may be shown as answers.

Binding custom radio buttons with MVVM

4 Answers 545 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
ImNotTed
Top achievements
Rank 1
Iron
ImNotTed asked on 24 Aug 2015, 06:07 PM

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

4 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 26 Aug 2015, 01:20 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
ImNotTed
Top achievements
Rank 1
Iron
answered on 02 Sep 2015, 05:40 PM

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>

0
Boyan Dimitrov
Telerik team
answered on 04 Sep 2015, 01:37 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
ImNotTed
Top achievements
Rank 1
Iron
answered on 08 Sep 2015, 04:59 PM

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!

Tags
MVVM
Asked by
ImNotTed
Top achievements
Rank 1
Iron
Answers by
Boyan Dimitrov
Telerik team
ImNotTed
Top achievements
Rank 1
Iron
Share this question
or