TimeSpan Object with MVC Grid

16 posts, 0 answers
  1. chris
    chris avatar
    13 posts
    Member since:
    Jul 2010

    Posted 13 Dec 2010 Link to this post

    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?
  2. Mandar Bansod
    Mandar Bansod avatar
    8 posts
    Member since:
    Mar 2010

    Posted 11 May 2011 Link to this post

    hi did you happened to get the solution ?

    please tell me if you get ...

    thanks
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. CD
    CD avatar
    13 posts
    Member since:
    May 2011

    Posted 08 Sep 2011 Link to this post

    I need a solution to this as well.
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 09 Sep 2011 Link to this post

    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 >>

  6. CD
    CD avatar
    13 posts
    Member since:
    May 2011

    Posted 09 Sep 2011 Link to this post

    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 #> />")) _
  7. Mário
    Mário avatar
    4 posts
    Member since:
    Feb 2011

    Posted 12 Sep 2011 Link to this post

    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
  8. CD
    CD avatar
    13 posts
    Member since:
    May 2011

    Posted 12 Sep 2011 Link to this post

    I still get the same issue even with that change. 'Time' is undefined now.
  9. Mário
    Mário avatar
    4 posts
    Member since:
    Feb 2011

    Posted 12 Sep 2011 Link to this post

    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)
  10. CD
    CD avatar
    13 posts
    Member since:
    May 2011

    Posted 12 Sep 2011 Link to this post

    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..
  11. Mário
    Mário avatar
    4 posts
    Member since:
    Feb 2011

    Posted 12 Sep 2011 Link to this post

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

    Mário
  12. Vladimir
    Vladimir avatar
    15 posts
    Member since:
    Jan 2011

    Posted 02 Aug 2012 Link to this post

    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) #>");
  13. Mic
    Mic avatar
    9 posts
    Member since:
    Nov 2012

    Posted 26 Nov 2012 Link to this post

    Is it possible to sort by this column? Server operation set to false.
  14. Lawrence
    Lawrence avatar
    10 posts
    Member since:
    Jul 2013

    Posted 21 Nov 2014 Link to this post

    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" })
  15. Russell
    Russell avatar
    1 posts
    Member since:
    Nov 2014

    Posted 11 Sep 2015 in reply to Lawrence Link to this post

    This worked for me but I had to remove all of the \\
  16. Mohammad
    Mohammad avatar
    1 posts
    Member since:
    Sep 2015

    Posted 28 Sep 2015 in reply to chris Link to this post

    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.

  17. jeff
    jeff avatar
    2 posts
    Member since:
    Oct 2015

    Posted 08 Aug Link to this post

    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.

     

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017