KendoUI tips and tricks on Dates in a Grid


Have you ever tried to display a date in a Kendo UI Grid widget? It is possible but there are questions that you should keep in mind.

IMPORTANT: Next post explains how to display Time and Date Time Kendo UI widgets in a grid. Stay tuned!

Displaying a Date

Lets assume that we have the following JSON array (either I receive it from the server or it has been computed and stored in the array).

var entries = [
    { "name":"Dave Packard", "born":new Date(1912, 8,  7) },
    { "name":"Bill Hewlett", "born":new Date(1913, 4, 20) },
    { "name":"Larry Ellison","born":new Date(1944, 7, 17) },
    { "name":"Steve Jobs",   "born":new Date(1955, 1, 24) },
    { "name":"Bill Gates",   "born":new Date(1955, 9, 28) },
    { "name":"Jeff Bezos",   "born":new Date(1964, 0, 12) },
    { "name":"Larry Page",   "born":new Date(1973, 5, 26) },
    { "name":"Sergey Brin",  "born":new Date(1973, 7, 21) }
];

And I use the following grid for displaying the data:

var grid = $("#auth_tbl").kendoGrid({
    dataSource: { data: entries },
    editable: true,
    navigatable: true
});

I will get something like this:

And if I click on the date cell for editing it, I see:

Really easy. Well done!, Kendo UI team

KendoUI Formatting Dates on a Grid

Lets start doing some customizations. Something simple: set titles and choose the date representation as year-month-day, I.e. yyyy-MM-dd.

This is my new JavaScript code:

$("#auth_tbl").kendoGrid({
    dataSource: { data: entries },
    columns: [
        { field: "name", title: "Name" },
        { field: "born", title: "Born", format:"{0:yyyy-MM-dd}" }
    ],
    editable: true,
    navigatable: true
});

Now we can see that the format is the same when it is not in edit mode:

Than when it is:

Kendo UI folks: Thanks, again for making it simple!

KendoUI Grid dates are not Date Objects

Not everything is going to be that simple! Lets consider that I saved the dates as ISO 8601 (yyyy-MM-ddTHH:mm:ss.fffZ) and once I retrieve them I want to display them back.

Now, my entries are something like this:

var entries = [
    { "name":"Dave Packard", "born":"1912-09-06T22:00:00.000Z" },
    { "name":"Bill Hewlett", "born":"1913-05-19T22:00:00.000Z" },
    { "name":"Larry Ellison","born":"1944-08-16T22:00:00.000Z" },
    { "name":"Steve Jobs",   "born":"1955-02-23T23:00:00.000Z" },
    { "name":"Bill Gates",   "born":"1955-10-27T22:00:00.000Z" },
    { "name":"Jeff Bezos",   "born":"1964-01-11T23:00:00.000Z" },
    { "name":"Larry Page",   "born":"1973-06-25T23:00:00.000Z" },
    { "name":"Sergey Brin",  "born":"1973-08-20T23:00:00.000Z" }
];

and when I display it:

That is displayed as a string and not a date.

I need to convert it to a JavaScript Date Object that might be done in multiples ways:

  1. Do the conversion in model.transport.read.
  2. Do it in model.schema.data.
  3. Do it in model.schema.parse.

I opt for the last one since parse the response of my server, is exactly what I want to do.

Now, my Grid definition in JavaScript is:

$("#auth_tbl").kendoGrid({
    dataSource:{
        data:entries,
        schema:{
            parse:function (response) {
                $.each(response, function (idx, elem) {
                    if (elem.born && typeof elem.born === "string") {
                        elem.born = kendo.parseDate(elem.born, "yyyy-MM-ddTHH:mm:ss.fffZ");
                    }
                });
                return response;
            }
        }
    },
    columns:[
        { field:"name", title:"Name" },
        { field:"born", title:"Born", format:"{0:yyyy-MM-dd}" }
    ],
    editable:true,
    navigatable:true
});

What parse function does is receive the data from transport (in my case JSON entries array) and iterate on the elements and do the conversions.

NOTE: By default kendo.parseDate tries a series of formats depending on your culture and prebuilt ones BUT ISO 8601 as yyyy-MM-ddTHH:mm:ss.fffZ is not included. You can include them following my instruction posted here.

The result is (almost) the expected both in edit and not edit mode.

And I say almost since visually is correct BUT dates are not correct (one day less). The reason is a bug in KendoUI parseDate and ISO 8601 when it uses Zulu timezone where when building the Date object, it does not consider it as UTC. The fix is posted in here.

KendoUI Grid Dates in popup edit mode

What about if the edit is in popup mode?

The code would be like this:

$("#auth_tbl").kendoGrid({
    dataSource:{
        data:entries,
        schema:{
            parse:function (response) {
                $.each(response, function (idx, elem) {
                    if (elem.born && typeof elem.born === "string") {
                        elem.born = kendo.parseDate(elem.born, "yyyy-MM-ddTHH:mm:ss.fffZ");
                    }
                });
                return response;
            }
        }
    },
    columns:[
        { command:[ "edit" ] },
        { field:"name", title:"Name" },
        { field:"born", title:"Born", format:"{0:yyyy-MM-dd}" }
    ],
    editable:"popup",
    navigatable:true
});

And displayed I get:

Conclussions

  1. Define titles in KendoUI Grid columns options.
  2. Define date format in KendoUI Grid columns options.
  3. Data should be Objects since there is no conversion (guess) depending on the output format.
  4. Use dataSource.schema.parse function for converting data formats between transport format and and KendoUI Grid data formats.

Acknowledgements

Congratulations, Kendo UI team for making my life easier!

Advertisements

7 thoughts on “KendoUI tips and tricks on Dates in a Grid

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s