DatePicker movefocus and size of calendar question

[Marcel]

Hello,

I have two questions about the RadDatePicker.

I have a requirement that the enter-key should be used to select the date and move the focus from the DatePicker to the next control.

At the moment when I hit enter when a date is selected the calendar will close and the focus goes back to the textbox.

How can I move the focus to the next control immediately after I select the date, so with one-enter press the date is selected and focus moves to the next control?

I tried to handle the KeyDown event and the DropDownClosed event, in the event handler I call MoveFocus to the next field, but in both cases the focus remains in the DatePicker?

 My second question, whats the best way to change the size of the calendar, I want it to have a bigger size and bigger font (wider then the DatePicker textbox to which it belongs). How can I accomplish this, without changing the width of the textbox?

Regards,

Marcel

 

[Nasko]

Hi Marcel,

1. The observed by you behavior of RadDatePicker is an expected one. Indeed when selection is made the TextBox control part of RadDatePicker receives the focus. So, actually you need to move the focus from the TextBox and not from RadDatePicker. You could achieve this by handling the KeyUp event - using that event we will be sure that selection is made. Inside its implementation using the ChildrenOfType<T> method you will be able to get the TextBox control and using its MoveFocus method to move the focus to the next control.

private void RadDatePicker_KeyUp(object sender, KeyEventArgs e)
{
    var datePicker = sender as RadDatePicker;

    if (e.Key == Key.Enter)
    {
        var textBox = datePicker.ChildrenOfType<RadWatermarkTextBox>().FirstOrDefault();
        textBox.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
    }
}

2. In order to achieve the desired appearance you need to modify the default Style of RadCalendar as shown below:

<telerik:RadDatePicker SelectionChanged="RadDatePicker_SelectionChanged" KeyUp="RadDatePicker_KeyUp">
    <telerik:RadDatePicker.CalendarStyle>
        <Style TargetType="telerik:RadCalendar">
            <Setter Property="Width" Value="400"/>
            <Setter Property="FontSize" Value="20"/>
        </Style>
    </telerik:RadDatePicker.CalendarStyle>
</telerik:RadDatePicker>

We hope this will help you.

Regards,
Nasko
Telerik

[Marcel]

Hello Nasko,

Thanks it works as expected.

Marcel