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

Custom Editor Template - datePickerAttributes

3 Answers 25 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 15 Mar 2018, 05:49 PM

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.

 

3 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 19 Mar 2018, 11:47 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Simon
Top achievements
Rank 1
answered on 19 Mar 2018, 03:39 PM

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()

0
Dimitar
Telerik team
answered on 20 Mar 2018, 08:06 AM
Hello Simon,

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

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Scheduler
Asked by
Simon
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Simon
Top achievements
Rank 1
Share this question
or