CheckboxFor sometimes show label, sometimes not

[Henrik]

Hi,

I am using Telerik ASP.NET MVC Extensions 2016.1.111.0. and Razor. The CheckBoxFor control behaves slightly illogical - in one case it shows a label, in another case it does not. See the attached screenshot.

Both parameters are booleans, the difference is that one of the has a DisplayName:

 

From the model.cs

        public bool Dator { get; set; }
        [DisplayName("Passerkort 07:30-17:00")]
        public bool Passerkort { get; set; }

 

From the Index.cshtml

            @Html.LabelFor(m => m.Dator)
            @Html.Kendo().CheckBoxFor(m => m.Dator)
            @Html.LabelFor(m => m.Passerkort)
            @Html.Kendo().CheckBoxFor(m => m.Passerkort)

The parameter with the DisplayName specified will be displayed with a label attached to the CheckBoxFor, so to get rid of it I have to set .Label("") for that checkbox. Not a big deal, but I think maybe this was not the intention.

Best regards,

Henrik

 

[Danail Vasilev]

Hello Henrik,

Thank you for contacting us.

This is an expected behavior - when a data annotation attribute is set for a model field used inside CheckBoxFor() a corresponding label element is created. I would suggest that you either use other model field that doesn't have an attribute or remove the additional label.

Regards,
Danail Vasilev
Telerik

[Thomas]

Hi, we have the same problem.  I don't think the recommended solution is ideal since we need the ability to control the look/feel of labels in the site separately from fields.  For example, our form has labels on the left, fields on the right.  If we remove the attribute, we can no longer use Html.LabelForRequired in the same way as every other control.  If we remove the label control and leave the Kendo label, our check boxes all have labels on the right with different formatting and different orientation from every other field's labels.

We're going to use .Label(string.Empty) for now, but I really feel labels should be separate from controls to give users more control over layout.

[Joana]

Hi Thomas,

Thank you for your feedback.

As my colleague Danail Vasilev explained in his reply, the rendering of the label is based on the DisplayName attribute and we added it intentionally as a built in functionality in our CheckBox widget. So, you have several options as a workaround when DisplayName is set:

1. Set .Label(string.Empty) as you have mentioned:

@Html.LabelFor(m => m.Checked)
@(Html.Kendo().CheckBoxFor(m => m.Checked).Label(string.Empty))

2. Use the built in checkbox and style the checkbox to be displayed at the left side of the checkbox. Note that there might be several approaches in changing the appearance of the checkbox.

<style>
    .k-checkbox-label {
        padding-left: 0 !important;
    }
    .k-checkbox-label:before {
        left: 100% !important;
        margin-left: 10px;
    }
</style>

@(Html.Kendo().CheckBoxFor(m => m.Checked))

3. Use the CheckBox native wrapper with the styled k-checkbox class:

@Html.LabelFor(m => m.Checked)
@Html.CheckBoxFor(m=>m.Checked, new { @class = "k-checkbox" })

We understand that this behavior might be confusing at first sight in comparison to the native CheckBox wrapper behavior, but we considered it beneficial in more complex scenarios when you don't want to explicitly generate additional Labels. Moreover, this might lead to breaking change for many customers if we decide to remove it.

Regards,
Joana
Progress Telerik