CheckboxFor sometimes show label, sometimes not

4 posts, 0 answers
  1. Henrik
    Henrik avatar
    38 posts
    Member since:
    Nov 2015

    Posted 01 Feb 2016 Link to this post

    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

     

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 03 Feb 2016 Link to this post

    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
  3. Thomas
    Thomas avatar
    3 posts
    Member since:
    Nov 2013

    Posted 29 Jan 2018 in reply to Danail Vasilev Link to this post

    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.

  4. Joana
    Admin
    Joana avatar
    205 posts

    Posted 31 Jan 2018 Link to this post

    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.
Back to Top