TimeSpan Object with MVC Grid

[chris]

When I try to bind a TimeSpan column to an MVC extension Grid I am getting a weird [object Object] displayed.
My binding code is like:

.Columns(columns =>
                {
                    columns.Bound(p => p.Runner);
                    columns.Bound(p => p.RaceDate).Format("{0:dd/MM/yyyy}").Width(50);
                    columns.Bound(p => p.Race);
                    columns.Bound(p => p.Finish).Format("{0:hh\\:mm\\:ss}").Width(40);
                    columns.Bound(p => p.Pace).Format("{0:hh\\:mm\\:ss}").Width(40);
})

The DateTime column is fine it is just the TimeSpan columns giving the problem.
Any ideas on how to overcome?
Is it a display format issue?

[Mandar Bansod]

hi did you happened to get the solution ?

please tell me if you get ...

thanks

[CD]

I need a solution to this as well.

[Atanas Korchev]

Hi Cd,

This is a known limitation caused by the fact that there is no TimeSpan type in JavaScript. As a result the JavaScriptSerializer class serializes .NET timespans as complex objects. For example this:

<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(new TimeSpan(1, 1, 1)) %>V

results in this:

{"Ticks":36610000000,"Days":0,"Hours":1,"Milliseconds":0,"Minutes":1,"Seconds":1,"TotalDays":0.042372685185185187,"TotalHours":1.0169444444444444,"TotalMilliseconds":3661000,"TotalMinutes":61.016666666666666,"TotalSeconds":3661}

If you want to format a TimeSpan object on the client side you can use the format above and create a ClientSide template instead of using Format:

columns.Bound(o => o.Time).ClientTemplate("<#= Hours #> : <#= Minutes  #>");

Regards,
Atanas Korchev
the Telerik team

[CD]

When trying to use that clienttemplate it throws a js error saying 'Hours' is undefined.

Error breaks here:
function anonymous(data) {
var p=[];with(data){p.push('<input type=\'textbox\' name=\'IntervalHour\' ', Hours ,':', Minutes ,':', Seconds ,' />');}return p.join('');
}

This is my column definition:
.Columns(Function(c) c.Bound(Function(d) d.IntervalHour).ClientTemplate("<input type='textbox' name='IntervalHour' <#= Hours #>:<#= Minutes #>:<#= Seconds #> />")) _

[Mário]

Hi,

I was having the same problem, but the example given is not entirely correct:

It should read

columns.Bound(o => o.Time).ClientTemplate("<#= Time.Hours #> : <#= Time.Minutes  #>");

Instead of

columns.Bound(o => o.Time).ClientTemplate("<#= Hours #> : <#= Minutes  #>");

Mário

[CD]

I still get the same issue even with that change. 'Time' is undefined now.

[Mário]

Hello,

I'm sorry, i have the example working here :S
If the model property is "Time" it shouldn't be undefined.

In your example it would be

.Columns(Function(c) c.Bound(Function(d) d.IntervalHour).ClientTemplate("<input type='textbox' name='IntervalHour' value='<#= IntervalHour.Hours #>:<#= IntervalHour.Minutes #>:<#= IntervalHour.Seconds #>' />"))

Mário

(using version V.2011.1.622 here)

[CD]

Interesting. It does now show data in a format instead of Object.
In my database my value for a given record will be 06:00:00 meaning 6AM
With the ClientTemplate I now see 6 : 0 : 0 which is better than nothing.
However when entering edit mode for the record, the data is translated as 00:00:00 for all records.. the actual value isn't there, it's more like a mask. But let's say I edit the record for 6 : 0 : 0, it shows in the editor as 00:00:00 and then I overwrite that value with 05:00:00. The correct value is saved back as 05:00:00. But it's not intuitive to a user. They wouldn't understand why the data doesn't ever look the way it's supposed to. I think the interesting part is that by default the client edit template will format the data correctly but not really show correct data and the display template can't format the data without the custom template and then it doesn't even look right..

[Mário]

Hi,
I guess it depends on your edit template, this would "solve" the display part.

Mário

[Vladimir]

columns.Bound(c => c.Time).Title("Time").Width(100)
    .ClientTemplate("<#= typeof Time.Hours != 'undefined' ? $.telerik.formatString('{0:HH:mm}', new Date(2001,1,1,Time.Hours,Time.Minutes,0,0)) : $.telerik.formatString('{0:HH:mm}', Time) #>");

[Mic]

Is it possible to sort by this column? Server operation set to false.

[Lawrence]

I had a child grid and was getting errors.  Here's  what I had to do to make it work.  I also wanted to format the results to 00:00:00 and right align the results.

columns.Bound(a => a.Duration).ClientTemplate("\\#= kendo.toString(Duration.Days, \"00\") \\#:\\#= kendo.toString(Duration.Hours, \"00\") \\#:\\#= kendo.toString(Duration.Minutes, \"00\") \\#")
                              .HtmlAttributes(new { style = "text-align:right" })

[Russell]

This worked for me but I had to remove all of the \\

[Mohammad]

Hi dear Chris

I have had this problem before  .

Fortunately ,my problem was solved by using this code

 columns.Bound(p => p.StartTime).ClientTemplate("#= StartTime.Minutes # : #= StartTime.Hours  #").Title("StartTime");

Hope , it will be useful to You.

[jeff]

Thanks Lawrence.

I used this below which was much cleaner, Credit to Lawrence and Russell

c.Bound(m => m.end).ClientTemplate("#= kendo.toString(end.Hours, '00') #:#= kendo.toString(end.Minutes, '00') #");

Which gave hh:mm

 

Using

columns.Bound(p => p.StartTime).ClientTemplate("#= StartTime.Minutes # : #= StartTime.Hours  #").Title("StartTime");

Gives integer as number format so if it's less then 10, it won't have the leading 0. So could be h:m instead of hh:mm or h:mm.