Ignore Time Portion of DateTime in Grid When Grouping

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	All
Browser	All
Browser Version	All

Description

When grouping in a Grid by a datetime field, same days with different times are grouped separately.

How can I ignore the time portion of the datetime so that grouping happens by date only?

Solution

1. Generate a new field which contains only the date portion of the datetime value by using the parse function of a DataSource schema.
2. Bind the column to the newly created field and use the template property to display the datetime field instead.

<div id="grid"></div>

<script>
  $("#grid").kendoGrid({
    dataSource: {
      data: [
        { OrderDate: "2017-11-23T18:00:11.511Z", OrderId: "1" },
        { OrderDate: "2017-11-23T15:45:43.511Z", OrderId: "2" },
        { OrderDate: "2017-11-21T14:44:15.511Z", OrderId: "3" },
        { OrderDate: "2017-11-23T18:24:53.511Z", OrderId: "4" },
        { OrderDate: "2017-11-24T18:11:44.511Z", OrderId: "5" },
        { OrderDate: "2017-11-24T10:25:42.511Z", OrderId: "6" },
        { OrderDate: "2017-11-21T05:21:22.511Z", OrderId: "7" },
        { OrderDate: "2017-11-21T01:15:42.511Z", OrderId: "8" }
      ],
      schema: {
        parse: function(response) {
          var orders = [];
          for (var i = 0; i < response.length; i++) {
            var dateNoTime = new Date(response[i].OrderDate);
            var order = {
              OrderId: response[i].OrderId,
              OrderDate: response[i].OrderDate,
              OrderDateNoTime: new Date(
                dateNoTime.getFullYear(),
                dateNoTime.getMonth(),
                dateNoTime.getDate()
              )
            };
            orders.push(order);
          }
          return orders;
        },
        model: {
          fields: {
            OrderId: { type: "int"},
            OrderDate: { type: "date" },
            OrderDateNoTime: { type: "date" }
          }
        }
      }
    },
    columns: [
      { field: "OrderId", title: "Order ID" },
      {
        field: "OrderDateNoTime",
        title: "Order Date",
        template: "#= kendo.toString(OrderDate, 'yyyy/MM/dd HH:mm:ss') #",
        groupHeaderTemplate: "#= kendo.toString(value, 'yyyy/MM/dd') #"
      }
    ],
    groupable: true
  });
</script>

See Also

• Api Reference of the DataSource schema.parse Function
• Kendo UI Templates Overview