Binding custom radio buttons with MVVM

5 posts, 0 answers
  1. ImNotTed
    ImNotTed avatar
    11 posts
    Member since:
    Oct 2013

    Posted 24 Aug 2015 Link to this post

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

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 26 Aug 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. ImNotTed
    ImNotTed avatar
    11 posts
    Member since:
    Oct 2013

    Posted 02 Sep 2015 Link to this post

    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>

  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 04 Sep 2015 Link to this post

    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!
     
  6. ImNotTed
    ImNotTed avatar
    11 posts
    Member since:
    Oct 2013

    Posted 08 Sep 2015 in reply to Boyan Dimitrov Link to this post

    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!

Back to Top
Kendo UI is VS 2017 Ready