Formatting date field in KendoUI Grid coming as object

Question

I am trying to format a date field in KendoUI Grid where the field is coming as an object:

"callStart":{"date":"2014-01-24 12:04:36","timezone_type":3,"timezone":"Europe\/Berlin"}

I have tried:

{ field: "callStart", title: "Fecha", width: "100px", format: "{0:yyyy-MM-dd}" }

but still showing:

[object Object]

Any idea?

Thanks!

Answer 1

Don't know if you already solved it, but I'll answer late anyways. The reason why it's not working is because you are probably trying to bind the entire object callStart into the field column. The field expects only a date object, but you are not giving it one.

Also, your object seems to still be in JSON string format, you need to parse the object out as a first step (if it really is just raw JSON). Then the next step, you can:

1. Parse callStart on the columns themselves (with kendo Templates)
2. Parse callStart on the datasource itself through its schema

---

Option 1: Parse on the column field itself using a template

{ 
   field: "callStart", 
   title: "Fecha", 
   width: "100px", 
   template: "#= kendo.toString(kendo.parseDate(callStart.date, 'yyyy-MM-dd HH:mm:ss'), 'MM/dd/yyyy') #"
}

The advantage of this option is that your data source object still maintains its original form, but filtering and sorting may get a bit tricky.

---

Option 2: Parse the object through the dataSource schema

 var gridDS = new kendo.data.DataSource({
     data: result,
     schema: {
         parse: function (result) {
             for (var i = 0; i < result.length; i++) {
                 var resultItem = result[i];
                 resultItem.callStart = kendo.parseDate(result[i].callStart.date, 'yyyy-MM-dd HH:mm:ss');
             }
             return result;
         }
     },
     //etc...
 });

Each data source object goes through the parse function and you can do whatever processing you need to do to turn it into a JS date or kendo Date object. The advantage is that you can control the exact type for that column and makes filtering/sorting easier.

You'll probably have to do some tweaking to get your desired output, but these are the general options you need to pick from.