I declare a radio button group on the page inside a list-type control (or a @foreach loop). Radio button group is bound to a model property and needs to have its name prefixed with an index like so: "Model[0].PropOne". When I use @Html.Name helper with other controls like a checkbox it works right, but with radio buttons it produces a name like this - Model_0__PropOne. So, looks like it replaces brackets and dots with an underscore. What do I need to do to get it to work?

Scenario: Drop-down for customer to select preferred language. If they choose anything other than English, the Radio Group 'Interpreter Required?' (Yes / No) would be a required field. If they select English, this Radio Group is NOT required.

I have the 'Required' Data Annotations set in my model:

[Required]
public int? LanguageID { get; set; }

[Required]
public int? InterpreterRequiredID { get; set; }

View:

<div class="form-group">
    <label>What is your preferred language?</label><br />

    @Html.Kendo().ComboBoxFor(m => m.LanguageID).BindTo(new List<SelectListItem>()
    {
        new SelectListItem() { Text="English", Value="E" },
        new SelectListItem() { Text="Spanish", Value="S" },
        new SelectListItem() { Text="Other", Value="O" }
    }).Events(e => e
        .Change("LanguageID_onChange")
    )
</div>
<div class="form-group">
    <label>Do you require an interpreter?</label><br />
    @Html.Kendo().RadioGroupFor(m => m.InterpreterRequiredID).Items(i =>
        {
            i.Add().Label("Yes").Value("1");
            i.Add().Label("No").Value("2");
        })
</div>
<script>
    function LanguageID_onChange(e) {
        var el = document.getElementById('InterpreterRequiredID');

        if (this.value() == 'E') {
            el.removeAttribute("data-val-required");
        } else {
            el.setAttribute("data-val-required", "This is required!");
        }
    }
</script>

I have a grid doing edit  in a popup. When the popup shows it binds from my model to the fields  and all the fields bind and return their data back to the controller for Add/Update except for the RadioGroup it always returns null. It binds fine, just not returns any value to the Controller.

I tried the below:

@(Html.Kendo().RadioGroupFor(model => model.Sex)
                .Name("Sex1")
                .HtmlAttributes(new { style = "width:200px;", @class = "RequiredField" })
                .Layout(RadioGroupLayout.Horizontal)
                .Items(m =>
                {
                    m.Add().Label("Male").Value("Male");
                    m.Add().Label("Female").Value("Female");
                    m.Add().Label("N.A.").Value("N.A.");
                })           

)

I also tried using javascript to force it to update like below.

@(Html.Kendo().RadioGroupFor(model => model.Sex)
                .Name("Sex1")
                .HtmlAttributes(new { style = "width:200px;", @class = "RequiredField" })
                .Layout(RadioGroupLayout.Horizontal)
                .Items(m =>
                {
                    m.Add().Label("Male").Value("Male");
                    m.Add().Label("Female").Value("Female");
                    m.Add().Label("N.A.").Value("N.A.");
                })
                .Events(e =>
                {
                    e.Change("Sex_onChange");
                })

)

<script type="text/javascript">

</script>

No matter what I tried my model always returns null for the sex when it hits the controller.

Below is the model.

I have a form with quite a few yes/no radio button groups, split up into sections with divs (bootstrap cards). Each radiobutton is horizontally aligned, and has a label in the form of a span before it.

 <p>
                <span class="lbllabel1">Front page documentation complete?:</span>


                @(Html.Kendo().RadioGroupFor(m=>m.FrontPageComplete)
        .Name("FrontPageComplete")
        .Layout(RadioGroupLayout.Horizontal)
            .Items(i =>
            {
                i.Add().Label("No").Value("No");
                i.Add().Label("Yes").Value("Yes");


            })

        )

            </p>

The lbllabel1 class is defined as:-

.lbllabel1 {
    float: left;
    font-size: small;
    font-weight: normal;
    width: 28.0em;
    text-align: right;
    clear: left;
    margin-right: 5px;
    padding-top: 5px;
}

In most cases the labels vertically align well,  but the first entry in each div is misaligned (picture attached). How can I ensure proper alignment to teh radiogroup?

Thanks