Date field from local variable and autoBind false (delayed/lazy data load) not working

1 Answer 16 Views
Top achievements
Rank 1
Ricardo asked on 17 Mar 2022, 06:28 AM

I'm trying to make the SomeDate field format in the kendo grid below work, but no matter what I do, it always returns the ISO string instead of the formatted date. I even tried to define a template in the columns object, and used kendo.format, but I got the exact same result, an ISO string.

I need this data load to be delayed (autoBind:false), I can't provide any data at the beginning. I do know the field types in advance, and I'm defining it as "date". This got to use a locally defined variable.

I tested the code below in Kendo UI Dojo and it returns the ISO string also, so I know it is not an issue with my local libraries.

Why is the date not being formatted correctly? What am I missing?

<!DOCTYPE html>
    <base href="">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <link rel="stylesheet" href="" />

    <script src=""></script>
    <script src=""></script>

<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
    <script src="../content/shared/js/products.js"></script>

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

        $(document).ready(function() {
            var myData = [{ProductName:"My Product",UnitPrice:123,SomeDate:"2022-01-01T00:00:00-06:00"}];
            var $myGrid = $("#grid").kendoGrid({
                autoBind: false,
                dataSource: {
                    schema: {
                        model: {
                            fields: {
                                ProductName: { type: "string" },
                                UnitPrice: { type: "number" },
                                SomeDate: { type: "date" }
                    pageSize: 20
                height: 550,
                scrollable: true,
                sortable: true,
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                columns: [
                    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                    { field: "SomeDate", title: "Some Date", format: "{0:d}", width: "130px" }


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 22 Mar 2022, 08:59 AM

Hi Ricardo, 

The date field is not being formatted accordingly as it is coming in a string format:


console.log("SomeDate", typeof myData[0].SomeDate)


Thus, you need to convert this string to date before binding it to the Grid, for example:

myData[0].SomeDate = kendo.parseDate(myData[0].SomeDate)

Then the format will be correctly applied to the column filed.  Here is the modified Dojo:

Hope this helps.

Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question