Dropdownlist readonly() not recognized

[Tim]

Hi,

I am evaluating the kendo controls for purchase and I am having trouble setting a kendo dropdown to readonly in mvc 4 using the razor view engine. I keep getting the error

0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'readonly'

My solution is a little more complex but basically I have the below code with a bunch of stuff cut out. Everything works fine until i want to set the dropdown to read only on page load in one of my cases. It seems like I am following the documentation but i can't see to figure out what is wrong.  I've spent a good few hours on this and am out of tricks. I've got access to the dropdown for click events that i set on buttons and such but not during the $(document).ready.

I feel like something in .readonly() is using something not in my jquery but that is only a wild guess.

Thanks in a advance

<script>
//.readonly()doesn't work
  $(document).ready(function () {
        var something = $("#ProvinceRegion").data("kendoDropDownList");
        something.readonly();

//note: something.enable(false); works here just readonly() doesn't

});


//notice I can set .enabled on this function below
    function ClearCustomerClick() {

//all the below work
        var dropdownlist = $("#CustomerName").data("kendoDropDownList")
        dropdownlist.select(0);
        var billContactList = $("#BillingContact").data("kendoDropDownList")
        billContactList.enable(false);
        var billSiteList = $("#BillSite").data("kendoDropDownList")
        billSiteList.enable(false);

    }

</script>

and then my dropdown list is below

@using (Html.BeginForm("ProjectSetupDetails", "Setup", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
                    @(Html.Kendo().DropDownList()
                        .Name("ProvinceRegion")
                        .OptionLabel("Pick a region...")
                        .BindTo(Model.RegionList))

}

[Georgi Krustev]

Hello Tim,

 
The readonly functionality is available since Q1 2013 (2013.1.319). Before this release the widgets did not have support for readonly. Please verify that you are using the latest official release of Kendo UI.
Check this jsBin demo, which shows how to use readonly method.

Regards,
Georgi Krustev
the Telerik team

[Tim]

Thanks for your reply.

I am currently using the 2012.3.1114.340 for Kendo.MVC dll. I will look into updating the to the latest version to see if I can get readonly to work.

**Update: Georgi's solution worked

[Development Team]

Is there any way to set a kendo dropdown to readonly when using the mvc razor html helpers to generate the control?

All the threads I have found only show examples doing it with the javascript function, but surely there must be a way to do this with razor in c#.

 

[Eyup]

Hi,

You can use the following approach to achieve this requirement:

.HtmlAttributes(new { style = "width:50%", @readonly = "readonly" })

I hope this will prove helpful.

Regards,
Eyup
Telerik by Progress

[serge]

using readonly does not allow to switch, setting readonly a false still keeps the control blocked

[Eyup]

Can you elaborate on that?

[serge]

I mean, if I have a boolean property ReadOnly, I can't use it like "@readonly='@(obj.ReadOnly.ToString())'), readonly should be added, if True, or not to be added (removed) if the property is False...

[Eyup]

Try using a ternary operator as suggested here:
https://stackoverflow.com/questions/34889537/conditional-html-attribute-with-html-helper

[Chris]

[quote]Eyup said:Hi,

You can use the following approach to achieve this requirement:

.HtmlAttributes(new { style = "width:50%", @readonly = "readonly" })

I hope this will prove helpful.

Regards,
Eyup
Telerik by Progress

[/quote]

 

that only works on the first dropdown in a series of cascaded dropdowns.  Why is that?  The readonly  attribute has absolutely no effect on the 2nd and subsequent dropdowns! 

 

 

[Chris]

So, how exactly do we disable all dropdowns, if they are cascaded together?  Definitely not in the docs anywhere at all.

[Eyup]

Hi Chris,

Kendo provides built-in cascading combo functionality, where the dependent combos are kept in disabled mode until selection is made:
https://demos.telerik.com/kendo-ui/combobox/cascadingcombobox

Alternatively, you can use the $(document).ready() event to access all combos using jQuery and call the readonly method to them:
https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox/methods/readonly

Regards,
Eyup
Progress Telerik

[Chris]

Definitely not an acceptable solution.  It readonly doesn't apply in cascaded dropdowns.  There has been many questions about this, but not even one answer from Telerik.

[Chris]

There should be a conditional cascadefrom option, or something along those lines.  Then, if you wanted to conditionally disable all dropdowns, removing cascadefrom would then allow each cascaded dropdown to have a readonly attribute applied.  But, disabling a dropdown in my case, causes the view model values not to be posted back to the server, unless of course I want to write some more code to parse the view model values, which I do not.  so, I want a readonly attribute applied to each cascaded dropdown, which simply does not work because the cascadefrom option is set.

[Eyup]

Hello Chris,

You can use the following approach to disable multiple dropdowns/combos on the page. Could you check the disableDropDowns() method and let me know if this will be suitable for your scenario?
https://dojo.telerik.com/UNinikim/9

Regards,
Eyup
Progress Telerik

[Chris]

Hi.  That wasn't a great solution for me.  I got it working by using some razr code with an if statement to create either a cascaded set of dropdowns or non-cascaded dropdowns depending on a flag value.  That was a bit of code duplication, but it worked.  It seems theres really no way to dynamically disable cascaded dropdowns.  I also tried binding to various events to disable/enable the dropdowns, but that extra script tag broke some of my Jquery code that interacted with the dropdowns.

[Eyup]

Hi Chris,

I'm glad that you've managed to find a specific solution for your scenario.

If you want further suggestions on this matter, feel free to send us a modified dojo sample resembling your own configuration so we can provide more precise and accurate solutions.

Alternatively, you can also open a formal support ticket to send us an archive with your project.

Regards,
Eyup
Progress Telerik

[tech]

How can I use @readonly attribute conditionally?

Based on some logic it should add readonly 

.HtmlAttributes(new { style = "width:50%", @readonly = "readonly" })

else "not readonly" - 

.HtmlAttributes(new { style = "width:50%" })

How can I achieve it

[Eyup]

Hi,

 

You can try using conditional attributes or custom javascript to achieve this requirement:
- https://www.davidhayden.me/blog/conditional-attributes-in-razor-view-engine-and-asp.net-mvc-4
- https://stackoverflow.com/questions/9399531/asp-net-mvc-razor-conditional-attribute-in-html

I hope this helps.

 

Regards,
Eyup
Progress Telerik

[AGGELIKI]

Why can't you just expose to the MVC DDL wrapper a readonly property? Like .Enable ? 

[Eyup]

Hi Aggeliki,

This seems a nice idea - you can log it in our Public Feedback Portal so it can gather better traction:

https://feedback.telerik.com/aspnet-mvc