Make Combobox non editable

13 posts, 0 answers
  1. Shaahin
    Shaahin avatar
    3 posts
    Member since:
    Mar 2012

    Posted 16 Mar 2012 Link to this post

    How do I prevent user to enter any character in Combobox (and also datepicker) ?
    I tried this but it doesn't work :

        $(".k-input").attr("readonly", "readonly");

    Best regards.
  2. Charles
    Charles avatar
    9 posts
    Member since:
    Mar 2012

    Posted 19 Mar 2012 Link to this post

    use kendoDropDownList() instead of kendoComboBox()
  3. Kendo UI is VS 2017 Ready
  4. Shaahin
    Shaahin avatar
    3 posts
    Member since:
    Mar 2012

    Posted 19 Mar 2012 Link to this post

    Thanks , what about datepicker?
  5. Charles
    Charles avatar
    9 posts
    Member since:
    Mar 2012

    Posted 20 Mar 2012 Link to this post

    Ok so I had a chance to play with this for a minute. Try doing this:

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

    Worked for me.
  6. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 19 Mar 2014 Link to this post

    The problem with using the dropdownList is that the dropdown list has to have a value, and I would like to have the empty message and the clear X option.  On the demo, there is a read only button for this.  Am I missing something?
  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 20 Mar 2014 Link to this post

    Hello Dan,

    The goal behind the widget readonly functionality is to make it successful, but not editable. If you want to allow item picking, but to prevent filtering then you can make the visible input readonly after widget's initialization.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. tiffany
    tiffany avatar
    24 posts
    Member since:
    Jan 2014

    Posted 16 Oct 2014 in reply to Georgi Krustev Link to this post

    Hi,

    I need to make a kendo combo box readonly meaning non-editable, user only can select from dropdown but cannot type or edit the text in the box. I cannot use a dropdownlist instead. so my question is: Is there a simple way to make kendo combo box readonly?
    Thanks a lot
    Tiffany
  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 17 Oct 2014 Link to this post

    Hello Tiffany,

    Conceptually, a read-only ComboBox is exactly what DropDownList offers. Could you elaborate why you do not want to use the DropDownList widget?
    As to the question, you can make the visible input readonly after widget initialization:
    var widget = $("#combobox").kendoComboBox().data("kendoComboBox");
     
    widget.input.attr("readonly", true);


    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. tiffany
    tiffany avatar
    24 posts
    Member since:
    Jan 2014

    Posted 17 Oct 2014 in reply to Georgi Krustev Link to this post

    Hi,

    Thank you for the reply. but the solution does work for me, here is what i did:
        @Html.TextBoxFor(model => model.Language, new { @id = "cbLanguage" })

            $("#cbLanguage").css('width', '100%').kendoComboBox({
                index: 0,
                dataTextField: "text",
                dataValueField: "text",
                dataSource: [
                    { text: "English" },
                    { text: "Dutch" },
                    { text: "Italian" },
                    { text: "British" },
                    { text: "Spanish" }
                ]
            });

    I cannot use a dropdownlist because the input box will be a simple input box sometime, or it will be a dropdown sometime when i need, and it should be editable if it's a simple textbox, should be readonly when it's a dropdown (force to select from dropdown). also the looking should be like other input boxes in the same form. So i want a combobox and non-editable.
    Is that possible?

    Thanks
    Tiffany
  11. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 20 Oct 2014 Link to this post

    Hi Tiffany,

    Yes, it is possible using the aforementioned approach. Check this Dojo demo that demonstrates how to make visible input readonly.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. tiffany
    tiffany avatar
    24 posts
    Member since:
    Jan 2014

    Posted 22 Oct 2014 in reply to Georgi Krustev Link to this post

    Hi Shaahin,

    Thank you very much for the solution. it works fine for me. However, i have a new issue after making the combo input readonly. If i put the cursor in the combo input box and click the Backspace key, it will navigate to the previous page. Do you know how to solve this issue?
    Thanks a lot
    Tiffany
  13. tiffany
    tiffany avatar
    24 posts
    Member since:
    Jan 2014

    Posted 22 Oct 2014 in reply to tiffany Link to this post

    sorry for my earlier post, i mean Hi Georgi, not Shaahin.
  14. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 24 Oct 2014 Link to this post

    Hi Tiffany,

    You will need to prevent the default behavior of Backspace button, thus the browser navigation will be prevented. Check the updated demo.

    Regards,
    Georgi Krustev
    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