Hi Dan,

I have further raised an internal discussion with our team regarding the ongoing subject matter. After further discussion, our position stands firm and we will not consider altering the "Declined" state of this item.

With the risk of repeating myself, this most notoriously stems from Html's limitation for inputs of type checkbox and radio.

More in particular:

"Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the read-only attribute does not apply."

Which couples us to HTML's strategy due to the fact that:

"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."

Currently, if there is a proprietary need to muddle through this limitation, I would recommend revisiting the following alternatives suggested by colleagues and me:

• The suggestions that were provided by Stoyan on the 21st of November - By toggling the Enable configuration or by adding an overlay.

• The suggestion mentioned by my colleague Mihaela from the 8th of December -  Where a custom HTML Helper exposes a ".ReadOnly()" API option.

• The suggestions provided by colleague Mihaela from the 16 Nov - Where the "disabled" state is programmatically omitted and a built-in click handler is provided which returns false by using the .HtmlAttributes() API configuration.

• The suggestion provided by me on the 31st of August - Where the aforementioned suggestions for adding an overlay and extending the Helper are molded together.

Kind Regards,
Alexander
Progress Telerik

Hi Dan,

At this stage, the CheckBox does not have an autonomous loading event in which a customary Extension method can be provided. Meaning, that the corresponding client-side intervention must be held in the document.ready() event.

If a client-side API option, is mandatory, I would recommend going over the following resource which further describes how custom widgets can be extended based on a given developer's preferences and requirements:

• Creating Custom Components

However, I would also recommend reviewing the following subsequent section as well:

• Note on Technical Support

I hope this helps during your embarked endeavors.

Kind Regards,
Alexander
Progress Telerik

Hi Dan,

I will be currently stepping in for my colleague Stoyan.

Indeed, I understand your concerns and the importance of such a functionality this may have for your current workflow. However, our final verdict regarding the induction of such a feature remains firm due to the previously mentioned reasons described by my colleague.

Nevertheless, if you would like a more HtmlHelper generic-like approach, a possible recommendation would be to adapt the previously mentioned suggestion by my colleague Mihaela from a previous discussion of yours:

• Checkbox not editable on a form (08 Dec 2022)

And from there, mold it with the suggestion my colleague had demonstrated in his previous reply. Here is what the configuration would look like:

Custom Extension:

public static class CheckBoxExtension
{
    public static CheckBoxBuilder ReadOnly(this CheckBoxBuilder builder, bool isReadonly)
    {
        if (isReadonly)
        {
            builder.ToComponent().HtmlAttributes.Add("class", "readonly");
        }

        return builder;
    }
}

Form:

<form id="myForm" action="/" method="post">
    <div class="checkBoxContainer">
    @(Html.Kendo().CheckBox()
        .Name("eq2")
        .Checked(true)
        .Label("Leather trim")
        .ReadOnly(true)
    )
    </div>
    <br/>
    <br />
    <button type="submit">Submit</button>
</form>

JavaScript:

<script>
    kendoCheckboxReadonly();
    function kendoCheckboxReadonly() {
        $(document).ready(function () {
            debugger;
            var inputs = $(".k-checkbox.readonly");
            var items = inputs.parent();
            items.each((ind, item) => {
                item = $(item);
                debugger;
                var dimensions = { width: item.width(), height: item.height() }
                var position = item.offset();
                var overlay = $("<div class='overlay'><div>");
                $(".checkBoxContainer").append(overlay);
                overlay.css({ "width": dimensions.width, "height": dimensions.height, "top": position.top, "left": position.left, "position": "absolute", "background-color": "rgba(255,255,255,0.3)" })
            })
        })
    }
</script>

This would then produce a result equivalent to the following:

Whilst submitting the CheckBox's value on the server-side:

For your convenience, I am also attaching a runnable sample in which the behavior can be exhibited further.

Kind Regards,
Alexander
Progress Telerik

Hello Dan,

Thank you for your feedback.

The reason we have declined this Feature Request stems from the Html's limitation for inputs of type checkbox and radio. I'd like to provide some additional information of the decision making process.

Kendo UI as well as Telerik UI for ASP.NET utilize numerous technologies on the client-side like Html, jQuery, CSS pre-processors, etc. One of the design principles we follow is to comply with the limitations the technologies which are foundational for the functionality of the products. 

This is done to avoid providing functionalities that could possibly turn out to be unmaintainable in the future. That is why we cannot commit to implementing the requested functionality officially.

Realizing the functionality

With the above in mind, this thread is a good place for a discussion between all those who are affected by the existing limitation to try and find a suitable solution that is achievable with relatively low effort on the part of the developers.

To start I have devised the following function which adds overlays over Checkbox items that have the readonly class:

function kendoCheckboxReadonly(){
        $(document).ready(function(){
            var inputs = $(".k-checkbox.readonly");
            var items = inputs.parent();
            items.each((ind,item)=>{
                item = $(item);
                var dimensions = {width:item.width(),height:item.height()}
                var position  = item.offset();
                var overlay = $("<div class='overlay'><div>");
                $("body").append(overlay);
                overlay.css({"width":dimensions.width,"height":dimensions.height,"top":position.top,"left":position.left,"position":"absolute","background-color":"rgba(255,255,255,0.3)"})
            })
        })
    }

Here are the steps to utilize the function above:

1. Add the readonly class to each Checkbox you'd like to make readonly;

                   @(Html.Kendo().CheckBox().Name("eq2").Checked(true).Label("Leather trim").HtmlAttributes(new { @class="readonly"}));

2. Include the code of function in your JavaScript files;
3. Make sure to call the function for each page that needs to contain readonly Checkboxes.

You can try out the suggested workaround in this Telerik REPL example.

I hope the information and the provided workaround are useful to you and anyone who needs to configure the readonly functionality for a checkbox and a radio button.

Regards,
Stoyan
Progress Telerik

Hi Dan,

The Checkbox lacks this functionality because it 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.

However there a couple of workarounds to this limitation:

Disabling the Checkbox

You can utilize the Checkbox's enable method to keep it disabled right before it is submitted.

@(Html.Kendo().CheckBoxFor(m => m)
    .Label(label)
    .Enable(false)
)

function onSubmit(e){
     var checkbox = $("#checkbox").data("kendoCheckbox");
     checkbox.enable(true);
}

Using an overlay

Alternatively, for a more static approach you can position an overlay over the Checkbox. Please refer to the related Knowledge Base article which shows a similar functionality applied to the Editor.

I hope the information above has been insightful.

Regards,
Stoyan
Progress Telerik