Kendo-grid refresh and date type columns

[Nik]

Hello.
I have grid with different column types date, datetime, time, etc.

I get data from server and fill grid successfully.
But when I refresh grid using .dataSource.data(data1) I get bad format for date and another types.

Date format from server :"/Date(1412228341970)/"
Date format showed: 02/10/2014 -
It's OK
Date format after refresh: /Date(1412228341970)/ -
WTF? I set column type as date and set datasource shema as date, but after refresh it show me string format.

Source example

var data1 = [{OrderId: 1, CreateDate: "/Date(1412228341970)/"}, {OrderId: 2, CreateDate: "/Date(1412233734310)/"}]
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                  data: data1,
                    schema: {
                        model: {
                            fields: {
                                OrderId: { type: "number" },
                                CreateDate: { type: "date", format: "{0:dd/MM/yyyy}",},
                            }
                        }
                    }
                },
                height: 540,
                sortable: true,
                reorderable: true,
                groupable: true,
                resizable: true,
                filterable: true,
                columnMenu: true,
                pageable: true,
                columns: [ {
                        field: "OrderId",
                        title: "Order Id",
                    },  {
                        field: "CreateDate",
                        title: "CreateDate",
                      format: "{0:dd/MM/yyyy}",
                                            type: "date",

                    }
                ]
            });
        });

      var updateGrid = function() {
         $("#grid").data("kendoGrid").dataSource.data(data1)
      }

One solution that I found is set template for field returned string:
 template: "#= kendo.toString(kendo.parseDate(CreateDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",

But this fix is not good I think.

[Alexander Valchev]

Hello Nik,

The issue occurs because the data method does not parse the passed data. When data method is used the DataSource assumes that the data will be already parsed so the date strings that come from the server are not transformed into JavaScript date object.

The recommended approach is to use the build-in DataSource transport. That way the DataSource will parse automatically the server response and you will be able to refresh the data using the read method.

Regards,
Alexander Valchev
Telerik

 

 

[Ilya]

Hi Alexander,

I have the same problem with date fields. I defined template and
see Ok, but when I start to edit I get value in ticks, like 1110538991217.
I know grid structure only at runtime. How it possible convert date field
in parameterMap using field type (not the name)?

[Alexander Valchev]

Hi Ilya,

The parameterMap function is intended to be used for modifying the parameters that are being send with the Ajax transport, not to parse the server response.

You may use the parse function of the schema to parse the data. That approach will work only if you use remote data, in case you are directly changing the data through the dataSource.data() method you should parse the data before passing it to the DataSource.

Regards,
Alexander Valchev
Telerik

 

 

[Rajasekar Nammalvar]

I have seen that many of the example uses only the url in transport datasource. Already I have used the URL in dojo's xhrGet to get the data & customized with JSON format like the following (first example code in this forum),

var data1 = [{OrderId: 1, CreateDate: "/Date(1412228341970)/"}, {OrderId: 2, CreateDate:"/Date(1412233734310)/"}]

How to use the above data1 in the transport datasource instead of URL.

var dataSource = new kendo.data.DataSource({<br>  transport: {<br>    read: {<br>      url: "http://demos.telerik.com/kendo-ui/service/products",<br>      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests<br>    }<br>  }<br>});

[Alexander Popov]

Hello Rajasekar,

I am not sure I understand your question very well. Would you please elaborate a bit?

Regards,
Alexander Popov
Telerik

 

 

[Rajasekar Nammalvar]

Hi Alexander:

Just before I have raised this issue as new ticket. Can you able to see that ticket?

http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=931600

If above ticket can't accessble then see the following,

I have grid with different column types which includes the date type column also. The above telerik forum has suggested to use the transport datasource instead of data. Still I am using the data datasource only. Because I have used the URL in dojo's xhrGet to get the data in arraylist (workorderList). The date column filter was working fine when we load the data first time. It's getting failed only when we regresh the grid (gridList.refresh();) see the attachment.

The stacktrace of error:
Uncaught TypeError: d.creationDate.getTime is not a function(anonymous function) @ VM25651:1o.filter @ kendo.all.min.js:11o.process @ kendo.all.min.js:11ht.extend._queryProcess @ kendo.all.min.js:11ht.extend.query @ kendo.all.min.js:11ht.extend._query @ kendo.all.min.js:11ht.extend.filter @ kendo.all.min.js:11g.extend.filter @ kendo.all.min.js:25g.extend._submit @ kendo.all.min.js:25b.extend.proxy.b.isFunction.i @ jquery.min.js:3b.event.dispatch @ jquery.min.js:3b.event.add.v.handle @ jquery.min.js:3

The sample code as following,

var xhrArgs = {
                    url : "http://localhost:8080/example/workorders/",
                    handleAs : "json",
                    load : function(data) {
                        var workorderList = [];
                        var groupId = 0;
                        workorders = data;
                        for (var count = 0; count < workorders.length; count++) {
                            workorderList.push({
                                workOrderId :  workorders[count].id,
                                externalId : workorders[count].externalId,
                                creationDate : workorders[count].creationDate,
                                userName : workorders[count].user,
                                workOrderType : workorders[count].workOrderType,
                                workOrderStatus : workorders[count].workOrderStatus,
                                workOrderPriority : workorders[count].workOrderPriority,
                                address : workorders[count].address.trim()
                            });
                        }
                        var gridWorkOrderList = $("#gridOpenWorkOrderList").data('kendoGrid');
                        if (gridWorkOrderList !== undefined && gridWorkOrderList !== null) {
                            gridWorkOrderList.dataSource.data(workorderList);
                            gridWorkOrderList.refresh();
                        } else {
                            $("#gridOpenWorkOrderList").kendoGrid({
                                dataSource: {
                                    data: workorderList,
                                    schema: {
                                        model: {
                                            fields: {
                                                workOrderId: { type: "string" },
                                                externalId: { type: "string" },
                                                creationDate: { type: "date" },
                                                userName: { type: "string" },
                                                workOrderType: { type: "string" },
                                                workOrderStatus: { type: "string" },
                                                workOrderPriority: { type: "string" },
                                                address: { type: "string" },
                                                workOrderGeometry: { type: "string" }
                                            }
                                        }
                                    }
                                },
                                scrollable: true,
                                filterable: {
                                    extra: false,
                                    operators: {
                                        string: {
                                            startswith: "Starts with",
                                            endswith: "Ends with",
                                            contains: "Contains",
                                            doesnotcontain: "Does not contain",
                                            eq: "Is equal to",
                                            neq: "Is not equal to"
                                        }
                                    }
                                },
                                columns: [
                                        {
                                              field: "externalId",
                                              title: "External Id",
                                              filterable: true
                                        },
                                        {
                                            field: "creationDate",
                                            title: "Created on",
                                            //format: "{0:MM/dd/yyyy HH:mm tt}",
                                            template: "#= kendo.toString(kendo.parseDate(creationDate), 'MM/dd/yyyy HH:mm tt')#",
                                            filterable: {
                                                ui: "datetimepicker",
                                                extra: true
                                            }
                                        },
                                        {
                                            field: "userName",
                                            title: "Crew Assigned",
                                            filterable: true
                                        },
                                        {
                                            field : "workOrderType",
                                            title : "Type",
                                            filterable: true
                                        },
                                        {
                                            field : "workOrderStatus",
                                            title : "Status",
                                            filterable: true
                                        },
                                        {
                                            field : "workOrderPriority",
                                            title : "Priority",
                                            filterable: true
                                        },
                                        {
                                            width : "300px",
                                            field: "address",
                                            title: "Address",
                                            filterable: true
                                        },
                                        {
                                            width : "130px",
                                            template: '<img src="img/delete.png" onclick="workorderController.deleteWorkOrder(\'#= workOrderId #\')" />'
                                        }
                                        ]
                            });
                        }
                    },
                    error : function(error) {
                        workorderController.handleError(error);
                    }
            };
            dojo.xhrGet(xhrArgs);

[Alexander Valchev]

Hi Rajasekar,

First of all I would like to point out that there is no need to call refresh after data() method of the DataSource. The data() method will trigger change event of the DataSource which in turn will force the Grid to automatically update.

gridWorkOrderList.dataSource.data(workorderList);
gridWorkOrderList.refresh(); //this line is not necessary

I assume that the issue occurs because when data method is used to replace the existing data, the dataSource expects passed data to be already parsed.

My suggestion is to parse the data in the for loop:

for (var count = 0; count < workorders.length; count++) {
    workorderList.push({
        workOrderId :  workorders[count].id,
        externalId : workorders[count].externalId,
        creationDate : kendo.parseDate(workorders[count].creationDate),
        userName : workorders[count].user,
        workOrderType : workorders[count].workOrderType,
        workOrderStatus : workorders[count].workOrderStatus,
        workOrderPriority : workorders[count].workOrderPriority,
        address : workorders[count].address.trim()
    });
}

For more information about kendo parse method see the corresponding API reference:

• http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-parseDate
• http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-parseFloat
• http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-parseInt

Regards,
Alexander Valchev
Telerik