How to restrict combobox to not allow manually edit value but allow only dropdown selection

[Daniel]

Hello,

Is there a way to restrict kendo combobox being edited manually but only allow the user to select from the dropdown values. If yes would you give an example in razor please?

I also want to allow the user to edit to a valid date in a kendo datepicker but not any other text. Is that possible?

Thanks

[Kiril Nikolov]

Hi Daniel,

One of the features of a combobox is to allow custom values, and this is why there is no feature to disable data entry. I would suggest you to use a DropDown list instead, so you can restrict the users to selected options only.

Regarding the DatePicker - you can either make it read-only using:

$("#datepicker").attr("readonly","readonly");

or you can use Kendo UI Validator to validate the text entered in the DatePicker widget. For your convenience here is a jsBin example which demonstrates a possible implementation.

Regards,
Kiril Nikolov
Telerik

[Daniel]

Hello Daniel,

Thanks for your answer. I did use the dropdown list instead.

On the DatePicker I can't make it read only as I have to make them editable by the user. My only option is to use validation.

Could you give me an example of the validation in MVC Razor. I am struggling with syntax.

Thanks,

[Kiril Nikolov]

Hi Daniel,

Currently there are no MVC wrappers for Kendo UI Validator. It should be initialized and configured using JavaScript/jQuery as in the example shown in my previous email.  Please check this demo to see how to implement DatePicker in your project using Razor syntax, and then initialize the validation using JavaScript.
 
Regards,
Kiril Nikolov
Telerik

[Fredo]

I had a client request similar to this. They wanted to leverage the combobox autocomplete & drop down, but needed the data entry to be a valid value already managed in the DB by another department.  Here is a solution using ASP.NET MVC wrappers & custom js.

The following is the wrapper code

@(Html.Kendo<OrderRequest>().ComboBoxFor(m => m.GlAccount).DataValueField("Number").DataTextField("Description").Filter(FilterType.Contains).HighlightFirst(true)
                      .DataSource(src => src.Read(read => read.Action("GetGlAccounts", "Lookup", new { area = "" }))).Events(events => events.Change("app.common.onChangeRestrictValues")))

and then the javascript code that restricts the combobox

/* Restrict entering/selecting values that are not defined for Kendo ComboBox  */
onChangeRestrictValues: function () {
    if (this.value() && this.selectedIndex == -1) {
        var dt = this.dataSource._data[0];
        this.text('');
    }
}

Below is a link to a more detailed explanation with links to my github repo where I'm publishing solutions & prototypes to some of the problems & solutions I run into when counsulting with Kendo UI for ASP.NET.

http://prestoasp.net/how-to-limit-a-kendo-ui-combobox-drop-down-to-valid-items-using-asp-net-mvc-wrappers/

[Fredo]

I ran into a similar requirement with one of my consulting clients.  They wanted to leverage the Kendo UI combobox autocomplete feature & the drop down feature to speed up data entry for users.  They also needed to restrict the input to valid values managed by another department.

Here is the ASP.NET MVC wrapper code for the combobox

@(Html.Kendo<OrderRequest>().ComboBoxFor(m => m.GlAccount).DataValueField("Number").DataTextField("Description").Filter(FilterType.Contains).HighlightFirst(true)
                      .DataSource(src => src.Read(read => read.Action("GetGlAccounts", "Lookup", new { area = "" }))).Events(events => events.Change("app.common.onChangeRestrictValues")))

Here is the custom javascript code that restricts the values to those available in the datasource

/* Restrict entering/selecting values that are not defined for Kendo ComboBox  */
onChangeRestrictValues: function () {
    if (this.value() && this.selectedIndex == -1) {
        var dt = this.dataSource._data[0];
        this.text('');
    }
}

If you'd like a more detailed example & explanation of this implementation you can check out this blog post

Additionally, there are links to the github repo I'm using to publish solutions & prototypes to the ASP.NET MVC Kendo UI issues I run into during my consulting endeavors

http://prestoasp.net/how-to-limit-a-kendo-ui-combobox-drop-down-to-valid-items-using-asp-net-mvc-wrappers/

[Kiril Nikolov]

Hello Alfredo,

Thank you for sharing your solution with us. I am sure that it will be helpful for our customers looking for the same approach.

Regards,
Kiril Nikolov
Telerik

 

 

[Floris]

Still relevant today, thanks!