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

7 posts, 0 answers
  1. Daniel
    Daniel avatar
    16 posts
    Member since:
    Feb 2013

    Posted 03 Jul 2013 Link to this post

    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
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 04 Jul 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Daniel
    Daniel avatar
    16 posts
    Member since:
    Feb 2013

    Posted 08 Jul 2013 Link to this post

    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,

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 09 Jul 2013 Link to this post

    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!
  6. Fredo
    Fredo avatar
    2 posts
    Member since:
    Mar 2014

    Posted 08 May 2014 Link to this post

    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/
  7. Fredo
    Fredo avatar
    2 posts
    Member since:
    Mar 2014

    Posted 08 May 2014 Link to this post

    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/

  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 09 May 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready