Template Syntax, conditional statements

7 posts, 0 answers
  1. Steve
    Steve avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 20 Apr 2012 Link to this post

    If I have a date value in my JSON, and I want to call a function on it to format it in my listview template...how do I go about that?

    So if this is my template...and I wanted to format the date value...how would I go about that?
    "<li>${Date}</li>"

    All the samples with the # syntax are looping results
  2.
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 21 Apr 2012 Link to this post

    Hi Steve,

    In order to achieve this you could call the kendo.toString inside the template. For example:
    var template = kendo.template("#= kendo.toString(date, 'MM/dd/yyyy') #");
    //where date is the variable

    In this example you can see the approach in action.
    I hope this information will help.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Steve
    Steve avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 22 Apr 2012 Link to this post

    Thanks for the reply Alex...

    I'm not sure we're on the same page?...I'm talking about the listview template syntax?
    Fiddle: http://jsfiddle.net/9mrsJ/9/

    Steve
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 23 Apr 2012 Link to this post

    Hello Steve,

    The list view uses the same template expressions as all other widgets.
    Straight to the issues that I noticed in your example:

    "<li>${FirstName} ${LastName} born on ${Date}</li>"

    There is no field Date in your data, that is why the template renders function Date() { [native code] }

    {
        FirstName: "Jane",
        LastName: "Smith",
        Born: "/Date(1224043200000)/"
    }

    The string "/Date(1224043200000)/" is not a valid JavaScript date and as a result the dataSource interprets it as a string. For that reason you will not be allowed to format it as a date.

    Once you have a valid JavaScript date objects in the dataSource, you could format them inside the template through the kendo.toString function as I explained in my previous reply.

    template: "<li>${FirstName} ${LastName} born on #= kendo.toString(Born, 'MM/dd/yyyy') #</li>"

    For convenience I have modified your Fiddle - http://jsfiddle.net/valchev/9mrsJ/10/

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Steve
    Steve avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 23 Apr 2012 Link to this post

    Ok thanks, like i said in the fiddle, I have no idea what the data looked like, I just winged it quick on the ipad

  11. Lorenzo Margola
    Lorenzo Margola avatar
    8 posts
    Member since:
    Jan 2008

    Posted 05 May 2012 Link to this post

    This wrong date format (Born: "/Date(1224043200000)/") is a response from ASP.Net wen convert a DateTime.
    To convert in a correct javascript date object try this.

    var StringBorn = "/Date(1224043200000)/";
    var DateBorn = new Date(parseInt(StringBorn.substr(6)));
  13. Ken Lewis
    Ken Lewis avatar
    28 posts
    Member since:
    Sep 2009

    Posted 15 Apr 2013 Link to this post

    Thanks, Lorenzo!

    That was a very straightforward solution and totally fixed it for me.

    Ken
  14.
Back to Top