Fast input with the keyboard

[Ivan]

Hi,

I try to use the Datetimepicker control to allow the user to enter date and time. The UI that I develop is intended to allow the user to be able to enter information as quick as possible using mainly the keyboard. I want to do the following:
1. To open calendar of the datetimepicker when the user enters the field
2. When user selected date and time and press either Enter or TAB key the calendar to close and the cursor to be focused on the next field.
3. When the calendar is open the user may want to edit the seconds in the raddatetimepicker textbox.

I played with GotFocus, LostFocus, DropDownOpened, DropDownClosed, KeyDown events but with not a great success. I tried to focus on the next field from the DropDownClosed event, but the focus is still on the datetimepicker.

I cannot find a way to control the Calendar events and to customize it (except the CalendarStyle).

Can you help me with this issue?

Thanks!

[Yana]

Hello Ivan,

Straight to your questions:

1 & 2: GotFocus and KeyUp events seem exactly what you need in order to achieve the desired behavior.  You can open the Calendar in GotFocus event handler:

private void RadDateTimePicker_GotFocus(object sender, RoutedEventArgs e)
{
     (sender as RadDateTimePicker).IsDropDownOpen = true;
}

and focus the next element in KeyUp event handler:

private void RadDateTimePicker_KeyUp(object sender, KeyEventArgs e)
{
    if (e.Key == Key.Enter)
    {
        txt1.Focus();
    }
}

3. I suggest to set DisplayFormat property to Long. Please, refer to our online example - http://demos.telerik.com/silverlight/#DateTimePicker/Configurator

Greetings,
Yana
the Telerik team

[Ivan]

Hello Yana,

Thank you for your reply! But it'doesnt help me too much :-(

Simple opening the Datetimepicker in GotFocus is the easy part, but closing it, not allowing it to reopen again and moving to the next field is the difficult in my opinion.
Here is the situation:
1. The datetimepicker receives focus and your code opens it.
2. With the mouse I select the Date first and then the Time.
3. At this moment I want the user to be able to press the TAB key or ENTER key to focus on the next field. The focus is still on the calendar, and your solution for the KeyUp works only if I click the mouse in the datetimepicker textbox. In fact, now pressing the Enter key when the focus is on the calendar close it and focus again on the datetimepicker textbox and the Calendar is automatically opened again in GotFocus.
4. If I select date and time from the calendar at step 3 and try to click on any other field with the mouse (or press ESC or ENTER), the calendar is closed, GotFocus is fired again and calendar opens again. So the only solution now to close it is to click the raddatetimepicker textbox and press Enter.

Actually I had a better solution for open/close even before asking here, but it doesn't allow the user to edit the seconds in the textbox and can't control TAB to move to the next field when a date/time are selected from the calendar:
 

    EndDateOpened = false;
private void radEndDate_GotFocus(object sender, RoutedEventArgs e)
{
    if (EndDateOpened)
    {
        EndDateOpened = false;
        nextField.Focus();
    }
    else
    {
        EndDateOpened = true;
        radEndDate.IsDropDownOpen = true;
    }
}
private void radEndDate_DropDownOpened(object sender, RoutedEventArgs e)
{
    EndDateOpened = true;
}

The only solution I see if I am able to control the calendar, to attach to his KeyUp event and from there to move to the next field, not allowing the datetimepicker to focus again on its textbox. But I can't find a way to do it :-(

[Yana]

Hello Ivan,

I've tested again the approach with KeyUp event and the next field is focused without a problem - I used Q1 SP1 release. You can find attached my test project, could you please download it and give it a try? What is different in your case?

Kind regards,
Yana
the Telerik team

[Ivan]

Hello Yana,

I tried your example - it works most of the time but I tried 10-15 times and 2-3 of them the DateTimePicker didn't close.
BUT just try to add another textbox before the datetimepicker and try again:

<TextBox x:Name="t" />
<telerik:RadDateTimePicker x:Name="dateTimePicker"
                           GotFocus="RadDateTimePicker_GotFocus"
                            KeyUp="RadDateTimePicker_KeyUp" />
  <TextBox x:Name="txt1" />

The datetimepicker NEVER closes, ESC doesn't work, clicking the mouse anywhere also doesn't work.

I was using the old Q1 but also tried with SP1 - the result was the same.

Regards

[Yana]

Hello Ivan,

I've modified the project again, could you please download it and examine it? Let us know how it goes.

Best wishes,
Yana
the Telerik team

[Ivan]

Hello Yana,

Your example works almost perfect now. The only exception is that when the datetimepicker is opened and I press ESC or click anywhere outside, the next time when I focus on it, it will not automatically open because dateTimePickerOpen is not set to false anywhere. I modified your code and in KeyUp I check for the ESC key also and set the variable to false:
 

else if (e.Key == Key.Escape)
{
    Dispatcher.BeginInvoke(() => { dateTimePickerOpen = false; });
}

But I don't know how to set it if the control loose focus when the mouse is clicked.

Regards

[Yana]

Hi Ivan,

Please find attached the project with the latest changes. Hope it's ok now.

Kind regards,
Yana
the Telerik team

[Ivan]

Thank you very much, It's perfect!