Checkbox not editable on a form

[Dan]

I have a checkbox that is checked on a form but it should send its value on the post but should not be editable

The editor template looks like this

@(Html.Kendo().CheckBoxFor(m => m)
         .Label(label)
         .Enable(enable)
         .HtmlAttributes(ViewData)
         .Deferred(deferred)
   )

The checkbox does not have a readonly functionality like the textbox

Can this be achieved? I tried adding a hidden field like @Html.HiddenFor(m => m) but that generates another input with the same id

[Mihaela]

Hi Dan,

When you disable the CheckBox control through the Enable(false) option, an attribute "disabled" is added to the HTML element. When submitting the form, you can remove the "disabled" attribute, and the Model property that is bound to the CheckBox will be sent on post. For example:

<script>
$(form).on("submit", function() {
    $("input[type='checkbox']:disabled").removeAttr('disabled');
});
</script>

 

Another option is to keep the CheckBox enabled and return "false" from the "click" event:

@(Html.Kendo().CheckBoxFor(m => m)
    .Label(label)
    .Enable(true)
    .HtmlAttributes(new {onclick = "return false;"})
)

Regards, Mihaela Progress Telerik

[Dan]

Hi Mihaela,

Not exactly what I wanted to hear.

Is there a ticket to have consistency around all the telerik controls? All of them to have the method readonly and option readonly?

[Stoyan]

Hi Dan,

I am stepping in for Mihaela who is taking a day off.

Initially I noticed the readonly property is missing for the Checkbox and submitted a Feature Request for it on your behalf.

However upon further investigation I noticed that this is a limitation introduced by the HTML specification of immutable elements like checkboxes and radio buttons:

The attribute is not supported or relevant to <select> or input types that are already not mutable, such as checkbox and radio or cannot, by definition, start with a value, such as the file input type.

For more information review the documentation of the readonly attribute.

Therefore the approach Mihaela suggested remains the recommended approach.

As an alternative you can also use an overlay over the Checkbox. This Knowledge Base article shows a similar approach applied for the Editor.

I will also write this in the Feature Request before closing it to possibly help any community members who find it.

[Dan]

Hi Stoyan,

Why did you decline my feature request? It was created by me personally and I still want it to be solved. I need the Telerik controls to be consistent.

Yes, the readonly cannot be used on the input of type checkbox but that does not stop the telerik team from implementing the readonly functionality. You can look at the textbox or numeric textbox to see how the readonly functionality is implemented. You already have 2 checkboxes placed in the html. And is quite easy to just add the readonly attribute only on the visible one but on the hidden one not.

Please un-decline my feature request.

Or please provide a way to define my own control on the Telerik UI for ASP.NET Core (NOT the Kendo UI for jquery - cause I already know how to do that) so I can implement this for myself

[Stoyan]

Hi Dan,

You are indeed correct two inputs are serialized for the Checkbox on the client-side. And have rightly observed that Components like the MultiSelect and the TextBox have 2 inputs one of which is always hidden and holds the value that is being submitted while the other is used for visualisation.

However the second input of the Checkbox has a different function - inputs of type "checkbox" are only submitted in forms, if they are checked but the Boolean type in C# is non-nullable. 

Therefore the hidden input of the Checkbox is added to ensure issues do not occur when the Component's value is submitted to the backend especially when it's bound to a server-side Model.

That and the fact that HTML5 doesn't support the readonly attribute for checkbox inputs is the reason we have declined the Feature Request. We wouldn't like to deceive you or any other community members to expect that the functionality will be implemented officially.

Workaround

Тhat being said you can place the Checkbox into a container Html element and use the following workaround that applies overlay over it. Thereby impeding the user to changing its value:

      function makeReadonly(element){
            var container;
            if(typeof(element)=="string"){
                  container = $(element);
            }else{
                  container = element;
            }
           
            var position = container.offset();
            var height = container.height();
            var width = container.width();
            $(`<div class='overlay' style='position:absolute; top:${position.top}px; left:${position.left}px; width:${width}px; height:${height}px; z-index:100; background-color:rgba(255,255,255,0.4)'></div>`).insertAfter(container);
      }
      $(document).ready(function(){
            makeReadonly(".fieldlist");
      })

Please review the approach in action in this Telerik REPL.

 

[Dan]

Hi,

I still think that the workaround you provided should be integrated in the kendo control. It does not matter that the HTML 5 checkbox does not support readonly. Why can't the kendo checkbox support it and he do the overlay or any other way to implement it.

Any way I think that you missed the point. What I need is that on the server to define something like

@Html.Kendo().Checkbox(m => m).Readonly(_readonly)

that is why I asked how can I customize the Telerik UI for ASP.NET Core checkbox so I can write the above code?

Please understand that the reason I am using the Telerik UI for ASP.NET Core is to use write as little javascript as possible. Otherwise, I would have used the kendo UI for jquery and I would have not asked you to define the method readonly cause I could have defined my own widget

[Mihaela]

Hi Dan,

You can create a custom Telerik UI CheckBox HtmlHelper that can accept additional configuration options, as suggested in the following forum thread:

https://www.telerik.com/forums/define-a-custom-html-kendo-extension-helper

For example:

public static class MyHtmlHelperExtensions
{
        
    public static Kendo.Mvc.UI.Fluent.CheckBoxBuilder MyCheckBox<TModel>(this IHtmlHelper<TModel> helper, string name, string label)
            where TModel : class
        {
            return helper.Kendo().CheckBox()
                .Name(name)
                .Label(label);

        }

}

[Dan]

Hi Mihaela,

How is the HTML Helper extension going to help me when I need to write the below code?

@Html.Kendo().Checkbox(m => m).Readonly(_readonly)

[Mihaela]

Hi Dan,

Generally, the HtmlHelper is a method that returns a string, which can represent any type of content (i.e., HTML tags like <input> and <img> or more complex content such as a tab strip or an HTML table). For more information regarding the CheckBox HtmlHelper, I would recommend reviewing the HtmlHelper.CheckBox() Method article:

https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.mvc.viewfeatures.htmlhelper.checkbox?view=aspnetcore-7.0

With that said, you could add an extension method to the CheckBoxBuilder class. Here is just a basic example for your reference:

//Extensions
    public static class CheckBoxExtension
    {
        public static CheckBoxBuilder Readonly(this CheckBoxBuilder builder, bool isReadonly)
        {
            if (isReadonly)
            {
                builder.ToComponent().HtmlAttributes.Add("onclick", "return false;");
            }

            return builder;
        }
    }

//View
    @(Html.Kendo().CheckBox()
        .Name("checkBox")
        .HtmlAttributes(new {title = "myTitle"})
        .Readonly(true)
    )

Hopefully, it will help you to achieve the desired result.

[Dan]

Hi Mihaela,

While it is a valid solution is still not what I want. I still think that my feature request should be implemented cause I would also need to remove the readonly on some actions from the user.

Thanks for the pointer.

[Mihaela]

Hi Dan,

As my colleague Stoyan explained, the 'readonly' attribute cannot be implemented in the CheckBox control because it is a limitation introduced by the HTML specification of immutable elements:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly

Best,

Mihaela

[Dan]

Hi Mihaela,

What does that have to do with anything? I am trying to use a KENDO CHECKBOX and not an HTML CHECKBOX. So KENDO CHECKBOX can support read-only. Isn't that the whole point of using the KENDO controls, because they offer functionality out of the box that is needed. You can even integrate the solutions you mentioned in the Kendo Checkbox functionality

[Stoyan]

Hi Dan,

Your frustration is understandable as the purpose of Kendo and Telerik UI is indeed to extend the functionalities provided by plain HTML, JavaScript and CSS.

For this reason I'd like to take a moment to explain how do Kendo and Telerik depend on each other and on the other client-side technologies.

To start from the top down Telerik UI provides server-side wrappers for Kendo UI for jQuery which depends on the jQuery library. Furthermore Kendo UI uses HTML, JavaScript and CSS internally to render its Components. Please refer to the image below that illustrates the dependencies visually:

While Telerik UI and Kendo UI utilize HTML, CSS and jQuery to provide a roster of Components and functionalities out-of-the-box, certain design limitations present in these basic client-side technologies cannot be overcome because our products depend on them.

Unfortunately, this is the case with the readonly functionality of the Checkbox. The limitation is introduced by the HTML specification. Since a Checkbox Component is ultimately rendered as an HTML input of type checkbox on the browser the limitation carries over to the Component as well. That isn't to say a workaround isn't possible only that we cannot support it officially.

Workarounds

• One approach is to disable the click on the Checkbox, or disable the input right before it is submitted.
  Additionally you can also apply some styling to visually distinguish the "readonly" Checkbox.

   <li>
            @(Html.Kendo().CheckBox().Name("eq3").Label("Luggage compartment cover"));
  </li>

      li:has(#eq3){
          pointer-events:none;
          opacity:0.8;
      }

  I've applied the approach above to this Telerik REPL.
  
• Another workaround is to use the overlay approach I suggested earlier in this thread.

I hope this information is insightful and useful. Please don't hesitate to contact us should more questions occur.