Disabling manual inputs for KendoUI elements

Question

I am using few KendoUI elements like ComboBox, DatePicker etc. everything works fine but there is one major problem that these elements actually allow manual input.

For e.g. in the comboBox I can type by clicking on it which activates a text box, which is really dangerous and spoils the purpose of using a <select> type list elements, same is the case with date picker.

So can you guide how can I disable these manual inputs and only restrict user to the select from the available options.

<input id="date" value="@DateTime.Now.Date"/>
<select name="need" id="need">
                            <option value="1">High</option>
                            <option value="2">Normal</option>
                            <option value="3">Low</option>
                        </select>
<script type="text/javascript">

     $("#date").kendoDatePicker();
     $("#need").kendoComboBox();
</script>

Kindly Help.

Solution 1

If the datepicker is disabled it will not be submitted to the server. Better use the readonly attribute instead.

Solution 2

to deny manual input you need the access to the input textbox inside the telerik template:

var input = $(#"combobox").data("kendoComboBox").input;
input.attr("readonly", "readonly");

Solution 3

If you dont want users to type in text , use the DropDownList instead of the combobox. For date picker you can easily disable the input element which you are converting to date picker using jQuery.

See this fiddle:

  $(document).ready(function() {
        // create DatePicker from input HTML element
          var datepicker =      $("#datepicker").kendoDatePicker();
          $("#datepicker").prop('disabled', true);
            });