RadTimePicker 24 hour display in GridViewDataColumn

[LEE]

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>

[Boris]

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

 

 

[LEE]

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.

[Boris]

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             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