This is a migrated thread and some comments may be shown as answers.
TimeSpan Object with MVC Grid
15 Answers 353 Views
This is a migrated thread and some comments may be shown as answers.
chris
Top achievements
Rank 1
chris asked on 13 Dec 2010, 07:41 PM
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?

15 Answers, 1 is accepted

Sort by
0
Mandar Bansod
Top achievements
Rank 1
answered on 11 May 2011, 01:44 PM
hi did you happened to get the solution ?

please tell me if you get ...

thanks
0
CD
Top achievements
Rank 1
answered on 08 Sep 2011, 12:36 PM
I need a solution to this as well.
0
Atanas Korchev
Telerik team
answered on 09 Sep 2011, 07:58 AM
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

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
CD
Top achievements
Rank 1
answered on 09 Sep 2011, 04:25 PM
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 #> />")) _
0
Mário
Top achievements
Rank 1
answered on 12 Sep 2011, 11:07 AM
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
0
CD
Top achievements
Rank 1
answered on 12 Sep 2011, 12:09 PM
I still get the same issue even with that change. 'Time' is undefined now.
0
Mário
Top achievements
Rank 1
answered on 12 Sep 2011, 12:31 PM
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)
0
CD
Top achievements
Rank 1
answered on 12 Sep 2011, 12:48 PM
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..
0
Mário
Top achievements
Rank 1
answered on 12 Sep 2011, 02:01 PM
Hi,
I guess it depends on your edit template, this would "solve" the display part.

Mário
0
Vladimir
Top achievements
Rank 2
answered on 02 Aug 2012, 12:44 PM
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) #>");
0
Mic
Top achievements
Rank 1
answered on 26 Nov 2012, 11:51 AM
Is it possible to sort by this column? Server operation set to false.
0
Lawrence
Top achievements
Rank 2
answered on 21 Nov 2014, 04:03 PM
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" })
0
Russell
Top achievements
Rank 1
answered on 11 Sep 2015, 02:33 PM
This worked for me but I had to remove all of the \\
0
Mohammad
Top achievements
Rank 1
answered on 28 Sep 2015, 07:08 AM

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.

0
jeff
Top achievements
Rank 1
answered on 08 Aug 2016, 11:57 PM

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.

 

 

Tags
Grid
Asked by
chris
Top achievements
Rank 1
Answers by
Mandar Bansod
Top achievements
Rank 1
CD
Top achievements
Rank 1
Atanas Korchev
Telerik team
Mário
Top achievements
Rank 1
Vladimir
Top achievements
Rank 2
Mic
Top achievements
Rank 1
Lawrence
Top achievements
Rank 2
Russell
Top achievements
Rank 1
Mohammad
Top achievements
Rank 1
jeff
Top achievements
Rank 1
Share this question
or