New to Kendo UI for jQuery? Download free 30-day trial

Display DateTime Value as ComboBox Group Header

Environment

Product Progress® Kendo UI® ComboBox for jQuery

Description

I am adding a grouping for the items of the ComboBox. The value (the field) for the grouping is of type DateTime. I need to use the DateTime value to get the correct sorting, but the date which is printed as a string to label each group is not in the correct format.

How van I render the date in a standard format and not like /DATE/14987988000000.

Solution

To properly display properly the group headers, configure a groupTemplate and a fixedGroupTemplate.

<input id="customers" style="width: 400px" />

<script>
  $(document).ready(function() {
    $("#customers").kendoComboBox({
      dataTextField: "ShipName",
      dataValueField: "OrderID",
      groupTemplate: "Group: #= kendo.toString(kendo.parseDate(data), 'd') #",
      fixedGroupTemplate: "Group: #= kendo.toString(kendo.parseDate(data), 'd') #",
      dataSource: {
        type: "odata",
        transport: {
          read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
        },
        group: {
          field: "OrderDate"
        }
      }
    });
  });
</script>

See Also

In this article