setting RadTimePicker values client-side

5 posts, 0 answers
  1. Keith
    Keith avatar
    94 posts
    Member since:
    Jun 2012

    Posted 26 Apr 2013 Link to this post

    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?
  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 01 May 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Keith
    Keith avatar
    94 posts
    Member since:
    Jun 2012

    Posted 01 May 2013 Link to this post

    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.
  5. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 06 May 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Keith
    Keith avatar
    94 posts
    Member since:
    Jun 2012

    Posted 06 May 2013 Link to this post

    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);
                }
            }
        }
    }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017