[Solved] Setting Interval of TimePicker using JQuery

[Camilo Torres]

Hi,

I am using Telerik TimePicker control. When the page loads, the Interval is set to a value from database. But on the same screen I have a text box control where user can specify a different value for Interval. If user changes the value of Interval (say from 30 mins to 15 mins) in text box then on tab out of text box (OnChange event), the Interval of TimePicker should change to the new value.

I have tried to use following code to achieve the same. But it appears that the interval does not change using JQuery. The value of the interval is set to the new value but the TimePicker does not show the time with new interval.

// Telerik IntegerTextBox
<%=  Html.Telerik().IntegerTextBox()

                         .Name("IntervalSelector")

                         .MinValue(0)

                         .MaxValue(60)

                         .Value(Model.TimePickers)

                         .ClientEvents(events => events

                               .OnChange("numericOnChange")

                           )

 %>

 

 // Telerik TimePicker

  <%= Html.Telerik().TimePickerFor(m => m.HStartTime)

                       .Interval(05)

  %>

 

<script type="text/javascript">

 function numericOnChange(e) {

 $('#HStartTime').data('tTimePicker').interval =15;

    }

</script>

Please let us know how this can be achieved.

Thanks in advance!!

[Georgi Krustev]

Hello Camilo,

In order to achieve your goal you will need to rebind the list with hours after changing the interval. Check the updated code snippet:

<script type="text/javascript">
 function numericOnChange(e) {
     $('#HStartTime').data('tTimePicker').timeView.interval =15;
     $('#HStartTime').data('tTimePicker').timeView.bind();
 }
</script>

Regards,
Georgi Krustev
the Telerik team