How to set item color on some times?

[Kennet]

I use a RadDateTimePicker, InputMode is TimePicker (standard 00:00-23:00 hours).  I need to set some times in Red color maybe bold). How can I do this?

/Ken

[Kaloyan]

Hi Kennet,

You need to add for instance a custom ItemContainerStyle to the RadClock property of the RadDateTimePicker. Then you can change the background of the RadClockItem with the help of DataTriggers. Follow the code bellow.

<telerik:RadDateTimePicker InputMode="TimePicker" HorizontalAlignment="Center"
                VerticalAlignment="Center" x:Name="radDateTimePicker">
            <telerik:RadDateTimePicker.ClockStyle>
                <Style TargetType="telerik:RadClock">
                    <Setter Property="ItemContainerStyle">
                        <Setter.Value>
                            <Style TargetType="telerik:RadClockItem">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding}" Value="00:00:00">
                                        <Setter Property="Foreground" Value="Red" />
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding}" Value="05:00:00">
                                        <Setter Property="Foreground" Value="Red" />
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding}" Value="10:00:00">
                                        <Setter Property="Foreground" Value="Red" />
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding}" Value="15:00:00">
                                        <Setter Property="Foreground" Value="Red" />
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding}" Value="20:00:00">
                                        <Setter Property="Foreground" Value="Red" />
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding}" Value="22:00:00">
                                        <Setter Property="Foreground" Value="Red" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Setter.Value>
                    </Setter>
                </Style>
            </telerik:RadDateTimePicker.ClockStyle>
        </telerik:RadDateTimePicker>

Regards,
Kaloyan
the Telerik team

[Kennet]

Hi,

I don't see how I should code this in C#. I can't feed it with a class since "ClockItemsSource" only takes DateTime as input. I need to by code choose wish hours to style in red.

/Ken

[Kaloyan]

Hello Kennet,

You have to inherit from the TimePicekr control and make some overriding. Follow the code:

public class TimePicker : RadTimePicker
{
    private RadClock clockPart;
    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        clockPart = this.GetTemplateChild("PART_Clock") as RadClock;
        if (clockPart != null)
        {
            clockPart.ItemContainerGenerator.StatusChanged += new EventHandler(ItemContainerGenerator_StatusChanged);
        }
    }
    private void ItemContainerGenerator_StatusChanged(object sender, EventArgs e)
    {
        if (clockPart.ItemContainerGenerator.Status == System.Windows.Controls.Primitives.GeneratorStatus.ContainersGenerated)
        {
            for (int i = 0; i < clockPart.Items.Count; i++)
            {
                var clockItem = clockPart.ItemContainerGenerator.ContainerFromIndex(i) as RadClockItem;
                if (clockItem != null)
                {
                    clockItem.Foreground = new SolidColorBrush(Colors.Green);
                }
            }
        }
    }
}

Kind regards,
Kaloyan
the Telerik team

[Ktulu]

Hello Kaloyan ,

I can't see how to use this TimePicker child class. Can we have the complete code for both Xaml and C#? Let's say, every time the user selects a date (inputMode=DateTimePicker), we catch the event SelectionChanged and feed up the control with a collection of TimeSpans that should be colored in red. (e.g use case: to tell the user those slots are not suitable for selection).
That means that colored TimeSpans depend on the selected date, they are not always the same.

Thank you very much,
Mouncif

[Pana]

Hi,

We currently do not support such feature. You should rather create a drop own button and put inside RadCalendar and a ListBox to select Date and Time. In the ListBox it should be easy to use DataTemplate and custom ViewModel to colorize some entries and mimic the RadClock.

Best wishes,
Pana
the Telerik team

[Ktulu]

Hello Pana,

Thanks for the reply.
Can I at least set the ClockItemsSource property with new ObservableCollection<TimeSpan> each time a date is selected? I could actually do that with the old RadTimePicker (and a separate RadDatePicker for date selection) but no more with the combined control RadDateTimePicker.
First, I initialize the ClockItemsSource with a default ObservableCollection<TimeSpan>.Then, I catch the SelectionChanged event and try to set it with a new ObservableCollection<TimeSpan> based on the selected date, but nothing happens. It keeps the initial collection value. It seems like the dependecy property ClockItemsSource is set only one time in the object lifecycle.

Thank you for your help.

BR,
Mouncif

[Pana]

Hello,

In theory you should be able to clear and set back the style selector for the clock items which will force the StyleSelector to reapply to all clock items. Other very ugly solution which I do not recommend under any circumstances would be to use the UIElement extension method in Telerik.Windows.Controls ChildrenOfType<>() to find all clock items. We will check if there are problems setting the ItemsSource on the clock.

It is just the clock is not design to work in your scenario so there would be no easy way to implement such feature.

Best wishes,
Pana
the Telerik team

[Stephan]

Hi everyone,

Kaloyan's sample code posted on Dec 22, 2010 works for me.
Now I want to colorize days, too.
How can I achieve that ?

Regards,
Marco

[Stephan]

Anybody ?