Category: C# MVC Framework

I’m working on a C# .Net Core MVC project that uses KendoUI for styling the HMTL elements.

I have a read only view where I need to display form elements as disabled and need a list of methods to disable all the various HTML form elements.

If you want to make Kendo UI form field elements read-only in a C# MVC project, you can use the HtmlAttributes or Enable configuration option depending on the type of Kendo UI control you are using. Here’s how you can do it for some common Kendo UI elements:

1. TextBox

@(Html.Kendo().TextBox()
    .Name("myTextBox")
    .HtmlAttributes(new { @readonly = "readonly" })
)

2. DropDownList

@(Html.Kendo().DropDownList()
    .Name("myDropDownList")
    .HtmlAttributes(new { @disabled = "disabled" })
)

3. NumericTextBox

@(Html.Kendo().NumericTextBox()
    .Name("myNumericTextBox")
    .HtmlAttributes(new { @readonly = "readonly" })
)

4. DatePicker

@(Html.Kendo().DatePicker()
    .Name("myDatePicker")
    .HtmlAttributes(new { @readonly = "readonly" })
)

5. ComboBox

@(Html.Kendo().ComboBox()
    .Name("myComboBox")
    .HtmlAttributes(new { @disabled = "disabled" })
)

6. CheckBox

For a checkbox, you would need to disable it rather than making it read-only:

@(Html.Kendo().CheckBox()
    .Name("myCheckBox")
    .HtmlAttributes(new { @disabled = "disabled" })
)

Alternative Method: Using JavaScript

You can also make fields read-only using JavaScript or jQuery if you need to dynamically set the state based on certain conditions.

$(document).ready(function() {
    $("#myTextBox").data("kendoTextBox").readonly(true);
    $("#myDropDownList").data("kendoDropDownList").enable(false);
    $("#myNumericTextBox").data("kendoNumericTextBox").readonly(true);
    $("#myDatePicker").data("kendoDatePicker").readonly(true);
    $("#myComboBox").data("kendoComboBox").enable(false);
});

Note:

• The @readonly attribute makes the field read-only, so users cannot modify the content but can still copy it.
• The @disabled attribute or enable(false) makes the field disabled, so users cannot interact with it at all.

Adjust the approach based on whether you want the field to be entirely disabled or just read-only.