Registering globalize.js before kendo culture js causes datetime columns in grids to fail formatting

5 posts, 0 answers
  1. Richard
    Richard  avatar
    5 posts
    Member since:
    Mar 2014

    Posted 01 Apr 2014 Link to this post

    Ok I'm using globalize.js and registering it BEFORE the kendo culture javascript, and using my helper to pick the right culture file.
    In my case it is en-GB.

    However, if I bind a DateTime column on my model in a KendoUI grid, it fails to display anything at all.

    I have tried various ways as shown here.

    columns.Bound(o => o.AuthorityDate);
    columns.Bound(o => o.AuthorityDate).Format("{0:d}");
    columns.Bound(o => o.AuthorityDate).Title("AuthorityDate").Format("{0:dd/MM/yyyy hh:mm:tt}");

    If I switch things and register globalize.js AFTER the kendo javascript, it then binds successfully.

    So, I understand that registering globalize.js BEFORE should make kendo use globalize as per the help documentation.

    So why is this NOT working?  I am using MVC5.1 kendo build 2014.1.318

    <script src="@Url.Content("~/Scripts/globalize/globalize.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/globalize/cultures/globalize.culture." Core.Helpers.CultureHelper.GetCurrentCulture() + ".js")" type="text/javascript"></script>

    <
    script src="https://da7xgjtj801h2.cloudfront.net/2014.1.318/js/kendo.all.min.js"></script>
    <script src="https://da7xgjtj801h2.cloudfront.net/2014.1.318/js/kendo.aspnetmvc.min.js"></script>

    <script src="@Url.Content("https://da7xgjtj801h2.cloudfront.net/2014.1.318/js/cultures/kendo.culture." + Core.Helpers.CultureHelper.GetCurrentCulture() + ".min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
  2. Richard
    Richard  avatar
    5 posts
    Member since:
    Mar 2014

    Posted 01 Apr 2014 in reply to Richard Link to this post

    PS.

    This is happening just in Grids.  Other controls like DatePicker are working fine.
  3. Richard
    Richard  avatar
    5 posts
    Member since:
    Mar 2014

    Posted 01 Apr 2014 in reply to Richard Link to this post

    P.P.S

    Yes this is an Ajax call to fetch the data.
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 03 Apr 2014 Link to this post

    Hello Richard,

    Basically when you load the globalize library, kendo.parseDate starts using Globalize.parseDate method instead of our own implementation of kendo.parseNumber. And since the globalize parser is not able to parse the format that the MVC returns the date successfully.

    e.g.

    Globalize.parseDate("/Date(-47876400000)/")

    Loading the globalize library after the Kendo scripts wont override our implementation and the Grid will parse it successfully.

    I am afraid there is no other work-around to this case. 

    Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Richard
    Richard  avatar
    5 posts
    Member since:
    Mar 2014

    Posted 03 Apr 2014 in reply to Petur Subev Link to this post

    Thanks Petur.

    Ok based on what kendo does then I can see the Globalize.parseDate needs some enhancing.
    I've tried modifying Globalize.js parseDate method so it handles the value coming in as "/Date(<some number>)".

    For those out there that want to keep using Globalize.js, I added this "hack" to the parseDate function at the end.

    .....
    if (date == null) {
        
    /* might be /Date(number) format, so try and return a date to give 
          UI code a chance to format with something like moment.js */
          var xDate = new Date(parseInt(value.replace("/Date(", "").replace(")", ""), 10));       
          
    return xDate || null;
       }  
    return date || null;
    };

    Then in the grid I use moment.js to help with the formatting.

    columns.Bound(o => o.AuthorityDate)
          .Width(150).ClientTemplate("#= moment(AuthorityDate).format('LLLL') #");

    Regards,
    Richard.




Back to Top