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

Make Combobox non editable

14 Answers 998 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Shaahin
Top achievements
Rank 1
Shaahin asked on 16 Mar 2012, 09:34 AM
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.

14 Answers, 1 is accepted

Sort by
0
Charles
Top achievements
Rank 1
answered on 19 Mar 2012, 09:41 PM
use kendoDropDownList() instead of kendoComboBox()
0
Shaahin
Top achievements
Rank 1
answered on 19 Mar 2012, 09:57 PM
Thanks , what about datepicker?
0
Accepted
Charles
Top achievements
Rank 1
answered on 20 Mar 2012, 02:45 PM
Ok so I had a chance to play with this for a minute. Try doing this:

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

Worked for me.
0
danparker276
Top achievements
Rank 2
answered on 19 Mar 2014, 07:24 PM
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?
0
Georgi Krustev
Telerik team
answered on 20 Mar 2014, 11:53 AM
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!
 
0
tiffany
Top achievements
Rank 1
answered on 16 Oct 2014, 05:59 PM
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
0
Accepted
Georgi Krustev
Telerik team
answered on 17 Oct 2014, 11:10 AM
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!
 
0
tiffany
Top achievements
Rank 1
answered on 18 Oct 2014, 12:09 AM
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
0
Accepted
Georgi Krustev
Telerik team
answered on 20 Oct 2014, 11:46 AM
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!
 
0
tiffany
Top achievements
Rank 1
answered on 22 Oct 2014, 08:50 PM
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
0
tiffany
Top achievements
Rank 1
answered on 22 Oct 2014, 08:51 PM
sorry for my earlier post, i mean Hi Georgi, not Shaahin.
0
Accepted
Georgi Krustev
Telerik team
answered on 24 Oct 2014, 08:39 AM
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!
 
0
Accepted
Philip
Top achievements
Rank 1
answered on 16 Jan 2019, 03:59 PM

I find all of these solutions to be lacking for me. For me, I needed a DropDownList that could accept and display custom values, not in its data source. However, I did not want it so that users could type in a custom value. This was due to us using a free-write form before that we now wanted to be more structured and controlled with predefined options, however, we did not want users to not see their free-write value from before.

So my solution was to set the inputs to read-only and then bind to the click of the input so that it would open the combo-box like a drop-down list. Please see my example code below. I think this provides a better user experience than the other solutions.

http://dojo.telerik.com/EQiPaFoG/7

0
Marin Bratanov
Telerik team
answered on 18 Jan 2019, 11:52 AM
Hello Philip,

I have marked your post as a possible answer to the question (along with the other examples) and I thank you for sharing your solution with the community (I updated your Telerik points as well).


Regards,
Marin Bratanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ComboBox
Asked by
Shaahin
Top achievements
Rank 1
Answers by
Charles
Top achievements
Rank 1
Shaahin
Top achievements
Rank 1
danparker276
Top achievements
Rank 2
Georgi Krustev
Telerik team
tiffany
Top achievements
Rank 1
Philip
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or