KendoUI TimePicker and DateTimePicker in Grid: Yes, we can!


KendoUI has widgets for Time and DateTime but you cannot use them in a Grid: this is pretty common when you introduce features in an existing product and it is not that easy fix modifying the sources. So, how can we get it?

KendoUI TimePicker and DateTimePicker in a Grid
KendoUI TimePicker and DateTimePicker in a Grid

Background

Lets review some of the tools that KendoUI provide us for solving this problem:

  1. Supported data types.
  2. Formatting.
  3. Editing templates.

KendoUI supported data types

Don’t look for it, there is no data type for time (according to KendoUI documentation you have: "string""number""boolean" and "date") but date includes time. This in not bad since we should understand that the widgets refer to visual representation and not data storing.

Then we should use date (no matter if we define the field using Schema Model in a DataSource or just store the data in the JSON array).
In the example we will display using a KendoUI grid the following JSON object:

var entries = [
    { "city":"Boston", "time":"10:14", datetime: "2012-08-28T10:14:00.000Z" },
    { "city":"Kyoto", "time":"23:14", datetime: "2012-08-28T23:14:00.000Z"},
    { "city":"La Paz", "time":"10:14", datetime: "2012-08-28T10:14:00.000Z"},
    { "city":"San Francisco", "time":"07:14", datetime: "2012-08-28T07:14:00.000Z"},
    { "city":"Salt Lake City", "time":"08:14", datetime: "2012-08-28T08:14:00.000Z"},
    { "city":"Salvador", "time":"11:14", datetime: "2012-08-28T11:14:00.000Z"},
    { "city":"Salzburg", "time":"16:14", datetime: "2012-08-28T16:14:00.000Z" },
    { "city":"San Diego", "time":"07:14", datetime: "2012-08-28T07:14:00.000Z" }
];

KendoUI cell formatting

Next is since we are using a Date object is choose how to represent the data (format). For this the easiest way is using format option in columns, something like this:

columns:[
    { field:"city", title:"City" },
    { field:"time", title:"Time", format:"{0:HH:mm}" },
    { field:"datetime", title:"Date - Time", format:"{0:yyyy-MM-dd HH:mm}" }
],

For time field, I have chosen to display the hour between 0-23  (HH) and minutes (mm) while for Date-Time, I have chosen four digits year (yyyy), month as digit between 1 and 12 and day of the month (dd) plus hours and minutes.

Using this I get the following grid:

KendoUI Grid with Date and Date-Time cells
KendoUI Grid with Date and Date-Time cells

Now, the question is when editing what I get is:

KendoUI DatePicker used for time field.
KendoUI DatePicker used for time field.

and this:

KendoUI DatePicker used for date-time field.
KendoUI DatePicker used for date-time field.

Both for field time and datetime the widget is a kendoDatePicker but not the kendoTimePicker and kendoDateTimePicker that we would like.

NOTE: this is actually understandable since JavaScript dates are mapped into kendoDatePicker.

KendoUI get kendoTimePickers and kendoDateTimePickers in a Grid

First is using the editor option in KendoUI Grid Columns definition (see this for documentation) that is a function that shall generated required HTML for getting the editor.

Following, the new Columns definition:

columns:[
    { field:"city", title:"City" },
    { field:"time", title:"Time", format:"{0:HH:mm}", editor: timeEditor },
    { field:"datetime", title:"Date - Time", format:"{0:yyyy-MM-dd HH:mm}", editor: dateTimeEditor }
],

Where I have defined a timeEditor function for time field and a dateTimeEditor function for datetime field.

And these functions are defined as:

function timeEditor(container, options) {
    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
            .appendTo(container)
            .kendoTimePicker({});
}

function dateTimeEditor(container, options) {
    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
            .appendTo(container)
            .kendoDateTimePicker({});
}

These functions receive two arguments:

  1. container: is the HTML element where we should introduce the input.
  2. options: options including information as the name of the field.

So, I generate and input field that includes the name of the field got from options and as format the same used when displaying the value.
Now, my fields while editing are:

KendoUI TimePicker in a Grid
KendoUI TimePicker in a Grid

And this:

KendoUI Grid with Date and Date-Time cells
KendoUI Grid with Date and Date-Time cells

And in popup mode:

KendoUI TimePicker and DateTimePicker in a Grid
KendoUI TimePicker and DateTimePicker in a Grid
Advertisements

38 thoughts on “KendoUI TimePicker and DateTimePicker in Grid: Yes, we can!

  1. Hi onabai,

    I sm tried to get datetime into kendrid edit. But it’s not working for me.
    I am getting error like
    “Error: TypeError: $(“”).appendTo(container).kendoDateTimePicker is not a function ”

    I am trying to fixed this issue from long time. But able to fixed it,
    Can you please help me to figure out.

    • In your JavaScript, do you have $(“”).appendTo(container) or $(“‘<input data-text-field…").appendTo(container).
      Which version of KendoUI are you using?

  2. Hi Onabai,

    I downloaded new kendo version “v2012.3.1114”.
    Using this version date/time inside kendo grid, Edit is not working properly.
    Even I am not able to update any records. For cross checking I used version “v2012.2.710”.
    In this version kendo grid edit functionality is working fine.

    Can you please suggest any idea.

    Thank you in advance.

    Piyush

  3. Hi Onabai,

    I have to restrict some records, for that I put one condition.
    edit: function (e) {
    if(e.model.IsReadOnly) {
    $(‘#gridTiming’).data(“kendoGrid”).closeCell();
    }
    }

    But for the read-only records it’s flickering. Is there any other way to restrict records.

    Thank you in advance
    Piyush

    • By the time that edit event gets fired the edition window is already opened. You need to act before it actually gets fired.

      My very first idea would be defining a custom edit button that actually checks if is read-only and then invokes editCell.

      Second idea, where do you have the edit button, on each row? what about prevent it from being displayed / clicked if the row is not editable?

      Try asking it in Stackoverflow.com maybe someone else can come up with a better / simpler idea 😀

    • You should build DataSource filter condition from the values of the DropDownList.

      Something like:

      $("#multiselectinput").on("blur", function (e) {
          var selected = multi.value().split(",");
          var condition = {
              logic  : "or",
              filters: [
              ]
          };
          $.each(selected, function (idx, elem) {
              condition.filters.push({ field: "ColumnXYZ", operator: "eq", value: elem.trim() });
          });
          grid.dataSource.filter(condition);
      });
      

      Something like: http://jsfiddle.net/OnaBai/4eNu4/335/ where I filter for values on ShipCity column

    • Why not doing it in the server and returning one? Otherwise (if it is readonly) declare two datasource, invoke read and merge them in the client before displaying it in the grid.

    • The only difference is how to find the element. There are two main cases, if you are inside a DateTimePicker event handler you can use this; otherwise, set some id and the use that id for finding the element.

  4. Hi Onabhi,
    In my kendo UI grid I have 1 column as datetime,I want that all the rows of this column will have datetime picker control ,so that user can edit any rows,but right now it is shwing only 1st row with date/time picker and rest all its not showing it,can you please help me out,I’m using KendoUI version 2013.1.514.trial

    • This is probably because you have defined the date picker in an editor function. Remember that in Kendo UI you only have one row in edition mode. If you want to have a DateTime Picker in all rows you will have to define it in a template but then you will need some additional code for entering and exiting edition mode and manually update the model.

    • Also, how would I make one of those columns non editable, just putting editable: false under column doesn’t seem to work?

    • Delete is adding it the same way you did for edit.

      { command: [ “edit”, “destroy” ] },

      Regarding add a new record the question is that it doesn’t make sense place a button for adding a new record on each row. You should, probably, do it by adding it in the toolbar. The second question then is that you should define a model in you schema. Something like:

      model: {
      fields: {
      type: { type: “string” },
      begintime: { type: “date” },
      endtime: { type: “date” }
      }
      }

      Check it here: http://jsfiddle.net/OnaBai/ZCyPx/62/

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