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

RadTimePicker 24 hour display in GridViewDataColumn

3 Answers 288 Views
GridView
This is a migrated thread and some comments may be shown as answers.
LEE
Top achievements
Rank 1
LEE asked on 31 Jul 2014, 05:24 AM
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>

3 Answers, 1 is accepted

Sort by
0
Boris
Telerik team
answered on 31 Jul 2014, 03:26 PM
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.
 
0
LEE
Top achievements
Rank 1
answered on 01 Aug 2014, 02:54 AM
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.
0
Boris
Telerik team
answered on 01 Aug 2014, 01:14 PM
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.
 
Tags
GridView
Asked by
LEE
Top achievements
Rank 1
Answers by
Boris
Telerik team
LEE
Top achievements
Rank 1
Share this question
or