Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

TimePicker multiple focused times

7 Answers 164 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Drew
Top achievements
Rank 1
Drew asked on 03 Sep 2010, 06:42 PM
multipleselectedtimes.png
every time i trigger the TimePicker to pop-up, it still has the previously selected times focused/highlighted. see attached screen shot. how do i set the focused/highlighted time client-side?

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 07 Sep 2010, 09:58 AM
Hi Drew,

This is an issue related to the control's popup animation - if you move the mouse while the hide animation is running, some time cells will be highlighted. This problem is fixed in the latest versions. Please upgrade RadControls or disable the animation.

<telerik:RadDateTimePicker>
        <ShowAnimation Duration="0" />
        <HideAnimation Duration="0" />
</telerik:RadDateTimePicker>


All the best,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Jeff
Top achievements
Rank 1
answered on 07 Sep 2010, 09:03 PM
lasttimeselected.png
the version update fixed it, not the animation disable.

now i need to set the focused time client-side. i have a page with multiple textboxes that share a timepicker. every time the timepicker pops, it shows the previously selected time. the issue is your timepicker doesn't know which selection to show so it highlights the previous. you can see from the attached image, it highlights the time from the below text box instead of the textbox that fired the event.

here is the client side function i'm calling onclick:

// called to handle the onclick and onfocus client side events for the texbox
function ShowTimePopup(timePickerId, sender, e)
{
    _currentTimePickerTextBox = sender;
    var timePicker = $find(timePickerId);
    var timeView = timePicker.get_timeView();
    var selectedTime = timeView.getTime();
 
    _currentTimePicker = timePicker;
    //timePicker.clear();
    //timePicker.set_focusedDate(selectedTime);
    //timeView.setTime(selectedTime.getHours(), selectedTime.getMinutes(), null, null);
 
    var position = timePicker.getElementPosition(sender);
    timePicker.showTimePopup(position.x, position.y + sender.offsetHeight);
}
 
0
Dimo
Telerik team
answered on 08 Sep 2010, 06:38 AM
Hi Jeff,

The TimeView doesn't know the correct selected time, because you are showing it manually after cancelling the default showing event. Do you really have a reason to do it this way? A workaround is possible to implement, but first, here is a simple demo that works as expected.

<%@ Page Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadTimePicker ID="RadTimePicker1" runat="server" ShowPopupOnFocus="true" SharedTimeViewID="RadTimeView1">
    <TimePopupButton Visible="false" />
</telerik:RadTimePicker>
 
<telerik:RadTimePicker ID="RadTimePicker2" runat="server" ShowPopupOnFocus="true" SharedTimeViewID="RadTimeView1">
    <TimePopupButton Visible="false" />
</telerik:RadTimePicker>
 
<telerik:RadTimeView ID="RadTimeView1" runat="server" />
 
</form>
</body>
</html>


Regards,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Jeff
Top achievements
Rank 1
answered on 08 Sep 2010, 07:27 AM
multiple RadTimePicker controls is not an option. we need to control the focus/selection client-side. you can see from the previously posted code we were trying different things (commented out) unsuccessfully. it would be nice if there was something along the lines of the RadDatePicker's method "set_selectedDate()".
0
Dimo
Telerik team
answered on 08 Sep 2010, 09:19 AM
Jeff,

Judging by your code snippet, you are using multiple RadTimePicker controls with a shared TimeView as well. If not, what is timePickerId in the Javascript code below? Can you provide a more extensive code snippet? What is the difference between my demo and your requirements?


function ShowTimePopup(timePickerId, sender, e)
{
    _currentTimePickerTextBox = sender;
    var timePicker = $find(timePickerId);

    ..........

}

Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Jeff
Top achievements
Rank 1
answered on 08 Sep 2010, 04:39 PM
we have multiple text boxes that share one RadTimePicker control. the difference between your demo and our requirements is that the text boxes are dynamic. the reason you are seeing the timePickerId is because we dont like to hard-code control ids in javascript. 

the code is too complex to post here so i'll try and paint a more clear picture:

imagine the below panel will have text box controls dynamically added to it
<asp:panel id="controlsPanel" runat="server" />
<rad:radtimepicker id="timePicker" runat="server" style="display:none;" >
    <clientevents ondateselected="TimeSelected" />
</rad:radtimepicker>

we wire up the client events of the text boxes server-side
timePickerTextBox.Attributes.Add("onclick", String.Format("ShowTimePopup('{0}',this,event);", timePicker.ClientID));
timePickerTextBox.Attributes.Add("onblur", String.Format("ParseTime('{0}',this,event);", timePicker.ClientID));

client-side functions
// called to handle the onclick and onfocus client side events for the texbox
function ShowTimePopup(timePickerId, sender, e)
{
    _currentTimePickerTextBox = sender;
    var timePicker = $find(timePickerId);
 
    var position = timePicker.getElementPosition(sender);
    timePicker.showTimePopup(position.x, position.y + sender.offsetHeight);
}
// used to set the text of the TextBox to the value of selected from the popup
function TimeSelected(sender, args)
{
    if (_currentTimePickerTextBox != null)
        _currentTimePickerTextBox.value = args.get_newValue();
}
// parse the time entered or selected by the user
function ParseTime(timePickerId, textBox, e)
{
    var timePicker = $find(timePickerId);
    if (timePicker != null && textBox.value != '')
    {
        var date = timePicker.get_dateInput().parseDate(textBox.value);
        var dateInput = timePicker.get_dateInput();
 
        if (date == null)
            date = timePicker.get_selectedDate();
 
        var formattedTime = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());
        textBox.value = formattedTime;
    }
}





0
Accepted
Jeff
Top achievements
Rank 1
answered on 08 Sep 2010, 11:57 PM
it took a little bit of work but we figured it out. (we were close to begin with). we grab the value from the text box and use your parseDate method on it. with the valid date object in hand we then call setTime() on the RadTimeView control and finally pop it up with the proper time selected.

function ShowTimePopup(timePickerId, sender, e)
{
    _currentTimePickerTextBox = sender;
    var timePicker = $find(timePickerId);
    var timeView = timePicker.get_timeView();
 
    if (_currentTimePickerTextBox.value == '')
    {
        timePicker.clear();
    }
    else
    {
        var currentTime = timePicker.get_dateInput().parseDate(_currentTimePickerTextBox.value);
        timeView.setTime(currentTime.getHours(), currentTime.getMinutes(), currentTime.getSeconds(), currentTime);
    }
 
    var position = timePicker.getElementPosition(sender);
    timePicker.showTimePopup(position.x, position.y + sender.offsetHeight);
}
Tags
Calendar
Asked by
Drew
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Jeff
Top achievements
Rank 1
Share this question
or