Posting a list (containing radio buttons) of view models from kendo grid to MVC controller action

A little bit tricky task was given to me lately… I had to create a kendo ui grid containing radio buttons and post its values back to a controller action.
The solution is as follows:

  • Created a razor helper function to make the grid client template somewhat readable:
    @helper GetRadioButtonTemplate()
    {
        <input name='JobList[#=renderNumber(data)#].Id' id='JobList_#=jobIndex#__Id' type='hidden' value='#=Id#' />
        <input name='JobList[#=jobIndex#].State' id='JobList_#=jobIndex#__State' type='radio' value='Approve' # if(data.State == @(((int)SomeState.Approve).ToString())) {# checked='checked' #} # ><span style='margin-right: 5px;'>Approve</span>
        <input name='JobList[#=jobIndex#].State' id='JobList_#=jobIndex#__State' type='radio' value='Deny' # if(data.State == @(((int)SomeState.Deny).ToString())) {# checked='checked' #} #><span style='margin-right: 5px;'>Deny</span>
        <input name='JobList[#=jobIndex#].State' id='JobList_#=jobIndex#__State' type='radio' value='Postpone' # if(data.State == @(((int)SomeState.Postpone).ToString())) {# checked='checked' #} #><span style='margin-right: 5px;'>Postpone</span>
    }
    
  • Of course there is a nasty task here as well: I needed a javascript function for the row numbers of the client template. If you have any better ideas, I would be really happy to hear about it!
    <script>
        var jobIndex = -1;
    
        function resetRowNumber() {
            jobIndex = -1;
        }
    
        function renderNumber() {
            return ++jobIndex;
        }
    
        function handleDataBound() {
            resetRowNumber();
        }
    </script>
    
  • The grid in the end looks as follows:
    @using (Html.BeginForm("PostJobStates", "Job", FormMethod.Post))
            {
    @(Html.Kendo().Grid(Model.JobList)
                   .Name("job-grid")
                   .Columns(c =>
                   {
                       c.Bound(j => j.Id).Visible(false);
                       c.Bound(j => j.JobName);
                       c.Template(t => { }).ClientTemplate(GetRadioButtonTemplate().ToString()).Title("State");
                   })
                   .Events(events => events.DataBound("handleDataBound"))
                   .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(m => m.Id(id => id.Id))
                        .Read(read => read.Action("GetJobItems", "Job", new { token = Model.Token })
                   )
            ))
    
    <button type="submit" name="submit" value="Save" class="k-button">Submit</button>
    }
    
  • The model for my view had to contain a list, and then I needed an enum:
    using System.Collections.Generic;
    
    namespace ForBlog
    {
        public class JobStateEditingViewModel
        {
            public List<ReferralJobItemViewModel> JobList { get; set; }
        }
    
        public class ReferralJobItemViewModel
        {
            public SomeState State { get; set; }
        }
    }
    

I hope someone can use it :)

Advertisements

About Tamas Nemeth

Husband and proud father of two daughters in Nürnberg. I'm working as a Senior Software Developer and an enthusiastic Clean-Coder. I spend most of my free time with my family (playing, hiking, etc...). I also play table-tennis and badminton sometimes...
This entry was posted in Technical Interest and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s