This is a migrated thread and some comments may be shown as answers.

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

7 Answers 4015 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 04 Jul 2013, 02:12 AM
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

7 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 04 Jul 2013, 03:01 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 08 Jul 2013, 08:41 PM
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,

0
Kiril Nikolov
Telerik team
answered on 09 Jul 2013, 07:14 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Fredo
Top achievements
Rank 1
answered on 08 May 2014, 09:42 PM
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/
0
Fredo
Top achievements
Rank 1
answered on 08 May 2014, 09:48 PM
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/

0
Kiril Nikolov
Telerik team
answered on 09 May 2014, 10:40 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Floris
Top achievements
Rank 1
Iron
answered on 07 Nov 2020, 11:50 AM
Still relevant today, thanks!
Tags
ComboBox
Asked by
Daniel
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Daniel
Top achievements
Rank 1
Fredo
Top achievements
Rank 1
Floris
Top achievements
Rank 1
Iron
Share this question
or