This is a migrated thread and some comments may be shown as answers.

How to set item color on some times?

9 Answers 73 Views
DateTimePicker
This is a migrated thread and some comments may be shown as answers.
Kennet
Top achievements
Rank 2
Kennet asked on 17 Dec 2010, 03:52 PM
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

9 Answers, 1 is accepted

Sort by
0
Kaloyan
Telerik team
answered on 22 Dec 2010, 04:01 PM
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
Browse the videos here>> to help you get started with RadControls for WPF
0
Kennet
Top achievements
Rank 2
answered on 23 Dec 2010, 05:46 PM
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
0
Kaloyan
Telerik team
answered on 28 Dec 2010, 09:21 AM
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
Browse the videos here>> to help you get started with RadControls for WPF
0
Ktulu
Top achievements
Rank 1
answered on 13 Jun 2011, 01:20 PM
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
0
Pana
Telerik team
answered on 16 Jun 2011, 04:34 PM
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
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
Ktulu
Top achievements
Rank 1
answered on 16 Jun 2011, 04:50 PM
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
0
Pana
Telerik team
answered on 17 Jun 2011, 07:12 AM
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
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
Stephan
Top achievements
Rank 1
answered on 07 May 2012, 03:45 PM
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
0
Stephan
Top achievements
Rank 1
answered on 22 May 2012, 02:26 PM
Anybody ?
Tags
DateTimePicker
Asked by
Kennet
Top achievements
Rank 2
Answers by
Kaloyan
Telerik team
Kennet
Top achievements
Rank 2
Ktulu
Top achievements
Rank 1
Pana
Telerik team
Stephan
Top achievements
Rank 1
Share this question
or