RadTimePicker 24 hour display in GridViewDataColumn

4 posts, 0 answers
  1. LEE
    LEE avatar
    8 posts
    Member since:
    Sep 2011

    Posted 31 Jul 2014 Link to this post

    I use the RadTimePicker on the GridViewDataColumn.

    I want to be seen as 24 hours.

    Can not use this.radTimePickerStartOn.Culture.DateTimeFormat.ShortTimePattern = "HH:mm:ss";

    What should I do?

    <telerikGridView:RadGridView x:Name="radGridView"
                                                Grid.Row="2"
                                                ItemsSource="{Binding UserCards}"
                                                SelectedItem="{Binding SelectedUserCard, Mode=TwoWay}"
                                                Margin="5" 
                                                SelectionMode="Single"
                                                ShowGroupPanel="False"
                                                AutoExpandGroups="True"
                                                AutoGenerateColumns="False"
                                                RowDetailsVisibilityMode="Collapsed"
                                                RowIndicatorVisibility="Collapsed"
                                                CanUserFreezeColumns="True"
                                                FrozenColumnCount="2">
        <telerikGridView:RadGridView.Columns>
             <telerikGridView:GridViewDataColumn Width="190" Header="{Binding ResourceWrapper.StringTable.StartedOn, Source={StaticResource StringTable}}" CellStyleSelector="{StaticResource UserCardCellStyleSelector}" DataMemberBinding="{Binding Card.StartedOn, Mode=TwoWay}" DataFormatString="{}{0:yyyy-MM-dd HH:mm:ss}">
                                                    <telerikGridView:GridViewDataColumn.CellEditTemplate>
                                                        <DataTemplate>
                                                            <StackPanel Orientation="Horizontal">
                                                                <telerikInput:RadDatePicker DateTimeWatermarkContent="{x:Null}" SelectedDate="{Binding StartDate, Mode=TwoWay}" Width="100" IsTooltipEnabled="False" />
                                                                <StackPanel HorizontalAlignment="Left" Width="90">
                                                                    <telerikInput:RadTimePicker x:Name="radTimePickerStartOn" SelectedValue="{Binding StartTime, Mode=TwoWay}" MinWidth="80" Width="90" Margin="0,0,0,0" Culture="ko" />
                                                                </StackPanel>
                                                            </StackPanel>
                                                        </DataTemplate>
                                                    </telerikGridView:GridViewDataColumn.CellEditTemplate>
             </telerikGridView:GridViewDataColumn>
        </telerikGridView:RadGridView.Columns>
    </telerikGridView:RadGridView>
  2. Boris
    Admin
    Boris avatar
    276 posts

    Posted 31 Jul 2014 Link to this post

    Hello Lee,

    Could you please elaborate a bit more on your scenario? Do you need to display only the time in GridViewDataColumn when the GridView is out of edit mode? If so, you can set DataFormatString property of the column to "{}{0:HH:mm:ss}". However, if you need to change how the time is displayed when the GridView is in edit mode, you can use the StringFormat property inside the binding of the SelectedValue property of RadTimePicker.

    <telerik:RadTimePicker SelectedValue="{Binding StartTime, Mode=TwoWay, StringFormat={}{0:HH:mm:ss}}" ... />

    Please let us know if this helps.

    Regards,
    Boris Penev
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. LEE
    LEE avatar
    8 posts
    Member since:
    Sep 2011

    Posted 31 Jul 2014 in reply to Boris Link to this post

    Thank you for answer.

    Please see the attached file.

    It is normal when it is displayed on the first, but when I try to edit, it does not appear in 24 hours.

    SelectedValue="{Binding StartTime, Mode=TwoWay, StringFormat={}{0:HH:mm:ss}}" 

    I have changed the source, but the result is the same.
  4. Boris
    Admin
    Boris avatar
    276 posts

    Posted 01 Aug 2014 Link to this post

    Hello Lee,

    The StringFormat does not work because of the set Culture property of the TimePicker. In order to work around this issue you can create a custom DateTimePickerColumn. In it you can place a UserControl with DatePicker and TimePicker controls as a cell editor.

    The UserControl editor:
    <UserControl x:Class="GridViewCustomDatePickerColumn.DateTimePicker"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <telerik:RadDatePicker x:Name="Calendar"
                                   SelectedValue="{Binding Established}"
                                   SelectionChanged="OnCalendarSelectionChanged" />
            <telerik:RadTimePicker x:Name="TimePicker"
                                   Grid.Column="1"
                                   SelectedValue="{Binding Established}"  Culture="ko"
                                   SelectionChanged="OnTimeChanged" />
        </Grid>
    </UserControl>

    To create the custom column you can derive from GridViewBoundColumnBase and override the CreateCellEditElement() method to insert the UserControl as a cell editor.

    public class DateTimePickerColumn : GridViewBoundColumnBase
        {
            public override FrameworkElement CreateCellEditElement(GridViewCell cell, object dataItem)
            {
                this.BindingTarget = DateTimePicker.SelectedDateProperty;
                var picker = new DateTimePicker();
                picker.SetBinding(this.BindingTarget, this.CreateValueBinding());
                return picker;
            }
     
            private Binding CreateValueBinding()
            {
                var valueBinding = new Binding();
                valueBinding.Mode = BindingMode.TwoWay;
                valueBinding.NotifyOnValidationError = true;
                valueBinding.ValidatesOnExceptions = true;
                valueBinding.UpdateSourceTrigger = UpdateSourceTrigger.Explicit;
                valueBinding.Path = new PropertyPath(this.DataMemberBinding.Path.Path);
                return valueBinding;
            }
        }

    To use the UserControl as a editor you need to define a dependency property (in the example SelectedDate). In this example that is done in the code-behind. There you can set the custom DateTimeFormat.

    public partial class DateTimePicker : UserControl
        {
            public static readonly DependencyProperty SelectedDateProperty =
               DependencyProperty.Register("SelectedDate", typeof(DateTime?), typeof(DateTimePicker));
     
            public DateTimePicker()
            {
                InitializeComponent();
                this.TimePicker.Culture.DateTimeFormat.ShortTimePattern = "HH:mm:ss";
            }
     
            public DateTime? SelectedDate
            {
                get
                {
                    return (DateTime?)this.GetValue(SelectedDateProperty);
                }
                set
                {
                    this.SetValue(SelectedDateProperty, value);
                }
            }      
     
            private void HandlePickersSelectionChanged()
            {
                if (this.Calendar.SelectedDate != null && this.TimePicker.SelectedTime != null)
                {
                    this.SelectedDate = this.Calendar.SelectedDate + this.TimePicker.SelectedTime;
                }
            }
     
            private void OnCalendarSelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                this.HandlePickersSelectionChanged();
            }
     
            private void OnTimeChanged(object sender, SelectionChangedEventArgs e)
            {
                this.HandlePickersSelectionChanged();
            }
        }

    Also, I attached a sample project that demonstrates the suggested approach.

    I hope this helps.

    Regards,
    Boris Penev
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top