How to set item color on some times?

10 posts, 0 answers
  1. Kennet
    Kennet avatar
    104 posts
    Member since:
    Jun 2009

    Posted 17 Dec 2010 Link to this post

    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
  2. Kaloyan
    Admin
    Kaloyan avatar
    920 posts

    Posted 22 Dec 2010 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Kennet
    Kennet avatar
    104 posts
    Member since:
    Jun 2009

    Posted 23 Dec 2010 Link to this post

    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
  5. Kaloyan
    Admin
    Kaloyan avatar
    920 posts

    Posted 28 Dec 2010 Link to this post

    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
  6. Mouncif FAQIR
    Mouncif FAQIR avatar
    2 posts
    Member since:
    May 2010

    Posted 13 Jun 2011 Link to this post

    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
  7. Pana
    Admin
    Pana avatar
    748 posts

    Posted 16 Jun 2011 Link to this post

    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
  8. Mouncif FAQIR
    Mouncif FAQIR avatar
    2 posts
    Member since:
    May 2010

    Posted 16 Jun 2011 Link to this post

    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
  9. Pana
    Admin
    Pana avatar
    748 posts

    Posted 17 Jun 2011 Link to this post

    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
  10. Stephan
    Stephan avatar
    14 posts
    Member since:
    Apr 2012

    Posted 07 May 2012 Link to this post

    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
  11. Stephan
    Stephan avatar
    14 posts
    Member since:
    Apr 2012

    Posted 22 May 2012 Link to this post

    Anybody ?
Back to Top
UI for WPF is Visual Studio 2017 Ready