Make Combobox non editable

[Shaahin]

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.

[Charles]

use kendoDropDownList() instead of kendoComboBox()

[Shaahin]

Thanks , what about datepicker?

[Charles]

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

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

Worked for me.

[danparker276]

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?

[Georgi Krustev]

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

 

 

[tiffany]

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

[Georgi Krustev]

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

 

 

[tiffany]

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

[Georgi Krustev]

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

 

 

[tiffany]

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

[tiffany]

sorry for my earlier post, i mean Hi Georgi, not Shaahin.

[Georgi Krustev]

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

 

 

[Philip]

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

[Marin Bratanov]

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