Custom Editor Template - datePickerAttributes

[Simon]

Trying to prevent the user from typing in the datetime text fields for Start and End. We want the user to use the "picker" widgets and prevent keyboard input. Thought I could add -        datePickerAttributes["readonly"] = "true"; to the generateDatePickerAttributes function as in:

 

    public Dictionary<string, object> generateDatePickerAttributes(
           string elementId,
           string fieldName,
           string dataBindAttribute,
           Dictionary<string, object> additionalAttributes = null)
    {

        Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();

        datePickerAttributes["id"] = elementId;
        datePickerAttributes["name"] = fieldName;
        datePickerAttributes["data-bind"] = dataBindAttribute;
        datePickerAttributes["required"] = "required";
        datePickerAttributes["style"] = "z-index: inherit;";
        datePickerAttributes["readonly"] = "true";

        return datePickerAttributes;
    }

 

This turns the entire datetime/datetimepicker widgets to readonly. If you inspect element you see readonly="readonly" on the input field which seems ok but the pickers are disabled as well.

What is the correct way to achieve this functionality?

Thanks.

 

[Dimitar]

Hello Simon,

When the readonly attribute is being set to the DatePickers through the additional attributes, the readonly state is being applied to the whole rapper instead, this leading to the described behavior.

A possible way to achieve the desired functionality is described below:

• Subscribe to the Scheduler's edit event.
  
  
• Inside the edit event get a reference to the edit window widget (setTimeout is need in order to wait for the window animation to roll out).
  
  
• Query the window wrapper element to find the desired DatePicker widgets.
  
  
• Use jQuer attr() method to add the readonly state to each DatePicker element.

In essence, the above approach could be implemented as follows:

@(Html.Kendo().Scheduler<SchedulerCustomEditor.Models.MeetingViewModel>()
  ...
 .Events(e => e.Edit("onEdit"))
)

<script>
  function onEdit(e) {
    setTimeout(function (e) {
      var editWindow = $(".k-scheduler-edit-form").getKendoWindow();

      if (editWindow !== null) {
        var startDatePicker = editWindow.wrapper.find("#startDate").getKendoDatePicker(),
              endDatePicker = editWindow.wrapper.find("#endDate").getKendoDatePicker();

        startDatePicker.element.attr("readonly", "true");
        endDatePicker.element.attr("readonly", "true");
      }
    });
  }
</script>

I hope this helps you to resolve the issue.

Regards,
Dimitar
Progress Telerik

[Simon]

That doesn't seem to work.I can still use the keyboard to enter text in the datetimepicker fields.

This does work:

       //make the datetimepickers read-only

        $("#startDateTime").prop("readonly", true);
        $("#endDateTime").prop("readonly", true);

where #startDateTime", #endDateTime" are the ID's of the respective datetimepicker text fields. jquery recommends .prop() over .attr() now. I set this in the edit event handler but not inside setTimeout()

[Dimitar]

Hello Simon,

I am glad to hear that you have managed to resolve the issue by using the prop() method..

Regards,
Dimitar
Progress Telerik