Binding RadTimePicker to a DateTime in a grid

5 posts, 1 answers
  1. Terry
    Terry avatar
    157 posts
    Member since:
    Jul 2009

    Posted 05 Aug 2010 Link to this post

    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




  2. Terry
    Terry avatar
    157 posts
    Member since:
    Jul 2009

    Posted 05 Aug 2010 Link to this post

    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?


  3. DevCraft banner
  4. Terry
    Terry avatar
    157 posts
    Member since:
    Jul 2009

    Posted 05 Aug 2010 Link to this post

    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!


  5. Answer
    Maya
    Admin
    Maya avatar
    4062 posts

    Posted 10 Aug 2010 Link to this post

    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
    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
  6. Terry
    Terry avatar
    157 posts
    Member since:
    Jul 2009

    Posted 10 Aug 2010 Link to this post

    That fixed it, Maya.  Thank you!
Back to Top
DevCraft banner