Approved
Last Updated: 01 Jul 2019 15:35 by ADMIN
KSafadi
Created on: 19 Jun 2019 17:32
Category: DateTimePickers
Type: Feature Request
1
TimePicker Focus Specific Time on Open

Hey,

It would be very useful if the TimePicker component would have a feature called something like "AutoFocusTime()". By default, when there is no value inside the TimePicker, the default focused time is "12:00 am", therefore the user has to scroll up all the way to the required time. With the feature above, it would be possible to enter a time which should be focused by default. For example "8:00 am" which is when most businesses start operating.

Now the question is, why not just putting in a default value. Well, in a form with lots of inputs, the user may not know anymore which values he entered and which inputs have a default value set and therefore submitting wrong data. If a input doesn't have a default value this mistake can be caught by setting a [Required] attribute. Threfore, the user has to enter a value and it will be guaranteed that all values where entered by him and it wasn't a default value which has been set.

See ticket id 1412837.

3 comments
ADMIN
Alex Hajigeorgieva
Posted on: 01 Jul 2019 15:35
Hello, Karim,

I am glad that the proposed suggestion works for you for the moment.

Hopefully, the request will gain popularity and we will see it built-in in the near future.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
KSafadi
Posted on: 26 Jun 2019 18:45

Thanks Alex, that works perfectly! However, I think that it would be really useful to have a property where you can just enter the scroll time and it does it out of the box. 

I appreciate your effors!

ADMIN
Alex Hajigeorgieva
Posted on: 26 Jun 2019 16:46
Hello, Karim,

Thank you for the suggestion. 

I believe it can be very useful indeed. Meanwhile, you could achieve the same functionality with a few lines of JavaScript:

- add an Open event handler
- check if the widget has no value
- set the timeView current to be the desired element
- scroll to it

Here is a runnable Dojo illustrating the result:

https://dojo.telerik.com/@bubblemaster/UyudaHal

  @(Html.Kendo().TimePicker()
      .Name("timepicker")
      .HtmlAttributes(new { style = "width: 100%" })
      .Events(e =>e.Open("focusDefault"))
 )
<script>
    function focusDefault(e){
      var picker = e.sender;
      if (!e.sender.value()) { // Run only if no value was selected
       setTimeout(() => {
        let containerElement = picker.timeView.list;
        let listElement = containerElement.children().first();
        containerElement.scrollTop(listElement.height() * 8 / 24);
        picker.timeView.current(picker.timeView.list.find(".k-item:contains('8:00 AM')"));
      }, 0);
    }
 }
 </script>


Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.