setting RadTimePicker values client-side

[Keith]

In my web application I have multiple RadTimePicker controls. The user will select a value in the first control, then based upon that value, I need to set the value of the second control to that value minus x minutes. I then need the popup for the second time picker to display in intervals of n minutes for the first full hour prior plus any increment up to the hour in the first control.

I don't need help writing the code, just understanding the underlying control so I can make this happen.

Scenario: (Interval is 5 minutes, minutes to subtract is 15 minutes) TimePicker1 - User selects 7:30am - TimePicker2 is filled in with the value of 7:15am - User selects TimePicker2, popup should display all possible times between 6:00am to 7:30am in 5 minute increments.

The user settings will eliminate most of the need to actually select a time in the seond time picker, but in the event a custom value is needed, they will have that option.

I know that I can set the values server-side, but because I cannot afford the round-trip with the volume of data being processed and because I cannot ajaxify a single control on a multipageview, I am left with client-side processing.

Is there any way to manage this using the constructs of the TimePicker client side object?

[Angel Petrov]

Hi Keith,

I am sorry to say but with the current implementation of the RadTimePicker the functionality mentioned can not be implemented using client-side logic. For now this can only be done server-side. Such kind of functionality will be available in future releases and is logged into our system. Our developers are currently researching the problem and they will make the necessary improvements in the client-side API as soon as possible.

All the best,
Angel Petrov
the Telerik team

[Keith]

I have been studying the object model and the organization of the resulting html. I believe this should be able to be done relatively easily client-side.
1) Handle client event OnValueChanged
2) Obtain related control - $find(controlID);
3) set the value of the date input - control.get_dateInput().set_value(adjustedDateTime);
4) Get the associated time view - control.get_timeView();
5) Set startTime, endTime and interval - timeview.set_startTime(adjustedStartTime); timeview.set_endTime(adjustedEndTime); timeview.set_interval(newInterval);
6) Set the desired number of columns and items - timeview._itemsCount = count; timeview._columns = colcount;
7) Get the table object from the timeview - timeview.DivElement.children[0];
8) Insert/delete rows in the table as necessary to get the number of cells needed
9) Build the time matrix - timeview._timeMatrix = timeview._setTimeMatrix();
10) Loop through the table rows, insert/delete cells as necessary to make the table rows x columns while adding a link and setting the innerHTML to the associated value in the time matrix. - link.innerHTML = timeview._timeMatrix[row][column].format("h:mm tt");

I'll post some code later if I have time to put it all together. Perhaps you can help in getting this working.

[Vasil]

Hi Keith,

The problem with this approach is startTime and endTime can be changed only before the client initialization of the RadTimeView, and these properties do not work later since the time matrix is already created and the HTML is rendered.
We have actually logged this as future request, and we will try to improve the TimeView to be able to recreate the matrix when using these properties.

All the best,
Vasil
the Telerik team

[Keith]

This seems to get the job done

function TimeChanged(sender, args) {
    var _columnCount = 6;
    var _currentTime = args.get_newDate();
    var _parentTimePickerOwner = $('#' + sender.Owner._element.id + '_wrapper')[0];
    var _childTimePickerId = _parentTimePickerOwner.attributes['childtimepicker'];
    if (_childTimePickerId == null)
        return;
    var _childTimePicker = $find(_childTimePickerId.value);
    var _timeInterval = parseInt(_parentTimePickerOwner.attributes['childtimepicker-interval'].value);
    var _timeOffset = parseInt(_parentTimePickerOwner.attributes['childtimepicker-timeoffset'].value);
    _childTimePicker.get_dateInput().set_value(new Date(_currentTime - new Date(_timeOffset * 60000)));
    if (_timeInterval == '0')
        return;
    var _childTimeView = _childTimePicker.get_timeView();
    update_PickerHtml(_childTimeView, _currentTime, _timeInterval, _columnCount);
}
function update_PickerHtml(timeView, startTime, interval, columnCount) {
    var _itemCount = parseInt((startTime.getMinutes() + 60 + interval) / interval);
    var _rowCount = _itemCount / columnCount;
    _rowCount = (_itemCount % columnCount != 0) ? parseInt(++_rowCount) : _rowCount;
    var hh = startTime.getHours();
    var mm = startTime.getMinutes();
    var dd = startTime.getDate();
    timeView.set_startTime(((hh == 0) ? dd - 1 : dd) + "-" + ((hh == 0) ? "23" : hh - 1) + "-0-0-0");
    timeView.set_endTime(dd + "-" + hh + "-" + (mm + interval).toString() + "-0-0");
    timeView._itemsCount = _itemCount;
    timeView._columns = columnCount;
    timeView.set_interval("0-0-" + interval + "-0-0");
    var table = timeView.DivElement.children[0];
    while (table.rows.length <= _rowCount)
        table.insertRow(table.rows.length);
    timeView._timeMatrix = timeView._setTimeMatrix();
    table.rows[0].cells[0].colSpan = columnCount;
    while (table.rows.length > 1)
        table.deleteRow(table.rows.length - 1);
    var i = 0;
    for (var trl = 1; trl <= _rowCount; trl++) {
        var tr = table.insertRow(trl);
        for (var c = 0; c < columnCount; c++) {
            i++;
            var cell = tr.insertCell(c);
            if (i <= _itemCount) {
                var anc = document.createElement("a");
                anc.setAttribute("href", "#");
                anc.innerHTML = timeView._timeMatrix[trl][c].format("h:mm tt");
                cell.appendChild(anc);
            }
        }
    }
}