Custom Editor Template - datePickerAttributes

4 posts, 0 answers
  1. Simon
    Simon avatar
    42 posts
    Member since:
    Mar 2016

    Posted 15 Mar 2018 Link to this post

    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.

     

  2. Dimitar
    Admin
    Dimitar avatar
    807 posts

    Posted 19 Mar 2018 Link to this post

    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.
  3. Simon
    Simon avatar
    42 posts
    Member since:
    Mar 2016

    Posted 19 Mar 2018 Link to this post

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

  4. Dimitar
    Admin
    Dimitar avatar
    807 posts

    Posted 20 Mar 2018 Link to this post

    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.
Back to Top