Binding RadTimePicker to a DateTime in a grid

[Terry]

Hi:

I have the following XAML:

<radGridView:GridViewDataColumn Header="Start Time"
    DataMemberBinding="{Binding StartTime, Mode=TwoWay}">
    <radGridView:GridViewDataColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding StartTime, Converter={StaticResource DateTimeToTimeString2}}" />
        </DataTemplate>
    </radGridView:GridViewDataColumn.CellTemplate>
    <radGridView:GridViewDataColumn.CellEditTemplate>
        <DataTemplate>
            <radInput:RadTimePicker x:Name="StartTimePicker" TimeInterval="0:15:0"
                 SelectedTime="{Binding StartTime, Converter={StaticResource DateTimeToTimeString2}}" KeyDown="TimePicker_KeyDown" />
        </DataTemplate>
    </radGridView:GridViewDataColumn.CellEditTemplate>
</radGridView:GridViewDataColumn>

This is the converter:

public class DateTimeToTimeString2 : IValueConverter
{
    #region IValueConverter Members
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if ( value == null ) return null;
        DateTime dt1 = (DateTime) value;
        string x = dt1.ToShortTimeString(); ;
        return x;
    }
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException("This Convert supports only OneWay binding");
    }
    #endregion
}

The time from the datetime displays correctly in the cell template but when I go into edit mode, the RadTimePicker displays "Enter date" rather than the time string.  What am I doing wrong, and is there a code example for using a time picker in a grid where data is both entered and edited?

Thanks,

Terry

[Terry]

As an experiment, I also tried this by changing the datetime in the SQL database to a time column type and used the following converter:

public class TimeSpanToStringConverter2 : IValueConverter
{
    #region IValueConverter Members
    public object Convert( object value, Type targetType, object parameter, System.Globalization.CultureInfo culture )
    {
        if ( value == null ) return null;
        TimeSpan ts = (TimeSpan) value;
        DateTime dt = new DateTime( 2000, 1, 1, ts.Hours, ts.Minutes, 0 );        // TimeSpan doesn't have necessary formatting capability
        string x = dt.ToShortTimeString(); ;
        return x;
    }
    public object ConvertBack( object value, Type targetType, object parameter, System.Globalization.CultureInfo culture )
    {
        throw new NotImplementedException( "This Convert supports only OneWay binding" );
    }
    #endregion
}

Everything shows correctly.  When I enter edit mode, the converter is called and returns a valid time (e.g. "8:00 AM").  But that value isn't displayed.  I still get the prompt "Enter Date".  This is a time picker through which I wish to enter a new time or edit an existing time.  Why does it keep asking for a date and why doesn't it show the time I am trying to edit?

[Terry]

OK, I've solved that problem.  I should not have used the converter for the time picker.  It wants a timespan, not a string.  So my code ended up looking like this:

<radGridView:GridViewDataColumn Header="Start Time"
    DataMemberBinding="{Binding StartTimeSpan, Mode=TwoWay}">
    <radGridView:GridViewDataColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding StartTimeSpan, Converter={StaticResource TimeSpanToStringConverter2}}" />
        </DataTemplate>
    </radGridView:GridViewDataColumn.CellTemplate>
    <radGridView:GridViewDataColumn.CellEditTemplate>
        <DataTemplate>
            <radInput:RadTimePicker x:Name="StartTimePicker" TimeInterval="0:15:0"
                 SelectedTime="{Binding StartTimeSpan, Mode=TwoWay}" KeyDown="TimePicker_KeyDown" />
        </DataTemplate>
    </radGridView:GridViewDataColumn.CellEditTemplate>
</radGridView:GridViewDataColumn>

Now the next issue is that when I am typing into the time picker, the displayed time is echoed in the grid row above.  It looks like the CellEditTemplate is trying to update the CellTemplate as the typing occurs, but it is confused about which row it is in.  See the attached screen shots.  Before.jpg shows the second row with a start time of 10:00 AM.  During.jpg shows the editing of the start time for the second row to 11:00 AM.  Note that the row above is echoing the time I have entered.  Now, when I tab to the next column (end time), both rows show the correct start times.

This is a complex application that gets its data from a SQL database via WCF RIA services, so it is difficult to post a complete reduction scenario, but please let me know any additional code, you would like to see.  You may be wondering if the keydown event is doing this, but when I remove that event call, I still get the same result. 

Also, the Timespan converter is not getting called during this update.

Thanks in advance for your help!

[Maya]

Hi Terry,

The duplication of the value of the cell in edit-mode is as a result of the appearance of the ToolTip of the RadTimePicker. In case you want to remove it, all you need to do is to set the property IsTooltipEnabled to "False".

All the best,
Maya
the Telerik team

[Terry]

That fixed it, Maya.  Thank you!