[Solved] How to make Ajax Grid + TimePicker play nice together?

[Aaron]

I've spent the past few hours unsuccessfully trying to get the TimePicker working as an inline editor inside an Ajax Grid (i.e. using Ajax databinding).

I'm attaching a complete repro but the important part is basically this:

public class TimeContainer
{
    public int Id { get; set; }

    [UIHint("Time")]
    public DateTime TimeAsDate { get; set; }

    [UIHint("TimeSpan")]
    public TimeSpan TimeAsTimeSpan { get; set; }
}

@(Html.Telerik().Grid<TelerikMvcGridTimePickerExample.Models.TimeContainer>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(m => m.Id);
        columns.Bound(m => m.TimeAsDate)
            .ClientTemplate("<#=TimeAsDate.toString(\"HH:mm:ss\")#>"); ;
        columns.Bound(m => m.TimeAsTimeSpan)
            .ClientTemplate("<#=TimeAsTimeSpan.Hours + ':' + TimeAsTimeSpan.Minutes + ':' + TimeAsTimeSpan.Seconds#>");
        columns.Command(cmd => cmd.Edit());
    })
    .DataBinding(binding => binding.Ajax()
        .Select("_Data", "Home")
        .Update("_Update", "Home"))
    .DataKeys(keys => keys.Add(m => m.Id))
    .Editable(editing => editing.Mode(GridEditMode.InLine))
    .Sortable()
    .Filterable()
)

If I feed the grid some data (let's say I use today's date - 7/22/2011 - and a time of 03:30:00), it displays the times correctly - so I know it has the correct values - but if I go into edit mode, both of the time pickers are wrong:

• The one based on the DateTime value goes to 7:00 AM instead of 3:30 AM; it is clearly not using an actual JS date and instead trying to parse out the full string value, because the "7" is the start of the date string.  I even tried setting my system clock ahead 1 month, and it changed from 7:00 AM to 8:00 AM, as expected.
  
  
• The one based on the TimeSpan value is always 00:00.

Is this something I'm doing wrong, or is it a bug in the Telerik MVC grid?  If I just put a TimePickerFor directly on the page (no grid/ajax), it always has the correct value for both DateTime and TimeSpan.  Inside an Ajax grid, it doesn't seem to behave properly.

If it's a bug, would there be any way to work around the issue in the meantime?

Thanks,
Aaron

[Georgi Krustev]

Hello Aaron,

 
Thank you for the test project.

The observed behavior is actually expected.

#1:  "TimeAsDate" column - grid does not know how to format passed date, because the ClientTemplate is not used by the editing. In other words, ClientTemplate is used to show how to format TimeAsDate object on client, but does not define how the object should be formatted when we try to edit it. You will need format of the column, which will be used when the grid formats the object:

columns.Bound(m => m.TimeAsDate)
    .Format("{0:HH:mm:ss}")
    .ClientTemplate("<#=TimeAsDate.toString(\"HH:mm:ss\")#>");

#2: TimeSpan is interpreted as complex object, because there is no TimeSpan object representation in JavaScript. As you probably know grid editing does not know how to use property of this complex object to bind editor template.

Please use first approach.
Best wishes,
Georgi Krustev
the Telerik team

[Aaron]

Ah, thank you.  I was using the Format method, but only with TimeSpans; I hadn't tried the combination of a DateTime property and a format specifier.

I'm actually using data annotations (DisplayFormat with DataFormatString) and the grid seems to honour that too, when a DateTime is used.

I wouldn't say that the TimeSpan behaviour is exactly "expected", since some of the Telerik MVC controls do understand TimeSpans or their JS equivalent (particularly the TimePicker).  Something in the documentation about the Grid not working with TimeSpans (yet?) might preempt future forum posts and support requests.

Anyway, thanks again, everything works with the correct combination of data types and format strings.