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

CheckboxFor sometimes show label, sometimes not

3 Answers 409 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Henrik
Top achievements
Rank 1
Henrik asked on 01 Feb 2016, 01:01 PM

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

 

3 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 03 Feb 2016, 05:43 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Thomas
Top achievements
Rank 1
answered on 29 Jan 2018, 04:28 PM

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.

0
Joana
Telerik team
answered on 31 Jan 2018, 03:19 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Henrik
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Thomas
Top achievements
Rank 1
Joana
Telerik team
Share this question
or