This is a migrated thread and some comments may be shown as answers.

Kendo-grid refresh and date type columns

7 Answers 426 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nik
Top achievements
Rank 1
Nik asked on 05 Nov 2014, 02:45 PM
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.

7 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 07 Nov 2014, 10:30 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ilya
Top achievements
Rank 1
answered on 09 Nov 2014, 09:49 AM
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)?
0
Alexander Valchev
Telerik team
answered on 12 Nov 2014, 08:18 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rajasekar Nammalvar
Top achievements
Rank 1
answered on 29 Apr 2015, 09:25 AM

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>});

0
Alexander Popov
Telerik team
answered on 01 May 2015, 12:59 PM
Hello Rajasekar,

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

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rajasekar Nammalvar
Top achievements
Rank 1
answered on 01 May 2015, 01:14 PM

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);

0
Alexander Valchev
Telerik team
answered on 05 May 2015, 08:06 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Nik
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Ilya
Top achievements
Rank 1
Rajasekar Nammalvar
Top achievements
Rank 1
Alexander Popov
Telerik team
Share this question
or