Disabling (making readonly) a whole bunch of datepickers on a form.

[Brian]

I've got a page which contains a dozen tabs, each of which has their own ViewComponent. Each ViewComponent has many datepicker controls. 

I have a situation where I need to disable almost all of them, except on one tab, based on the user's role. 

What are some ways to do this in one fell swoop, rather than setting .Enable(false) on each individual datepicker in markup?

Bonus: there are some regular old <input type="text">'s on these forms as well. Those are easy enough to disable with JQuery, but JQuery doesn't work on the datepickers, because while the text portion is read-only, the popup button displaying a calendar still works and can change the value of the text box.

Thanks so much for any ideas!

[Stoyan]

Hello Brian,

To achieve the desired outcome you need to access the client-side reference of the DatePickers:

1. Get the outer elements;

   var datepickers = $(".k-form-field").find(".k-datepicker")

2. Then iterate them and find the input;
3. Use it to get the client-side reference of each DatePicker;
4. Utilize the readonly method of the DatePicker's client-side API to make it readonly.

   datepickers.each((i,el)=>{
           var datepicker = $(el).find("input").data("kendoDatePicker");
           datepicker.readonly(true);   
   })

I hope these steps help you achieve the desired outcome.

Regards,
Stoyan
Progress Telerik

[Brian]

Thanks for this. As I'm not extremely familiar with JavaScript, I'm curious how to implement it on my ViewComponent? I tried to put this code in a $(document).ready(function() {...}), and it's not doing anything. 

[Stoyan]

Hi Brian,

It seems you've correctly added the snippet that I suggested into the call of the $(document).ready(function() {...}) to ensure the Telerik Components on the page are already present when the code executes.

This leads me to suspect that you aren't using a Telerik Form for which the suggested approach is intended. 

Could you please share some isolated code to give me a better idea in what kind of scenario do you need to make the DatePickers or DateTimePickers readonly?

This will enable me to recommend a more appropriate solution for the scenario you are facing.

[Brian]

Bingo! This is what is currently being used to render the form:

@using (Html.BeginForm("update", "incidentreturntowork", FormMethod.Post, new { id = "IncidentReturnToWorkForm" }))

I will experiment with replacing this with a Telerik form. 

[Stoyan]

Hi Brian, 

If you aren't using a Telerik Form then the $(".k-form-field") selector won't return any Html elements. This is why the suggested code didn't work as expected.

I recommend modifying the initial selector from

var datepickers = $(".k-form-field").find(".k-datepicker")

to

var datepickers = $("body").find(".k-datepicker")

to ensure that a collection of the DatePickers on the page are selected.

Please be aware the above code will only affect DatePickers on the page. To apply it to a DateTimePicker you need to update the selector:
var datepickers = $("body").find(".k-datetimepicker")
To further generalize the approach you can utilize the kendo.widgetInstance method which allows you to select an client-side instance of a Component without specifying its name/type:
datepickers.each((i,el)=>{
        var datepicker = kendo.widgetInstance($(el).find("input"));
        datepicker.readonly(true);   
})
I hope these suggestions are of use.