kendo grid date format problem.

[kyongho]

The date format does not reflect the column In the code below.

How can I make data on 'START_DATE' column to formatted string like '2011-11-02 00:00' and '2011-11-02 00:00'  with codes below :

       <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        height: 350,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        dataBound: function(e) {
                            console.log("dataBound" +  e);
                        },
                        columns: [{
                                field:"RESOURCE_ID",
                              width: 90
                            },{
                                field:"USE_PERCENTAGE",
                                width: 90
                              },{
                                  field:"START_DATE",
                                  format :"{0: yyyy-MM-dd HH:mm}",
                                  width: 90
                                }
                        ]
                    });
                    
                    var ds = {
                            type: "json",
                            schema: {
                                model: {
                                    fields: {
                                        RESOURCE_ID: { type: "string" },
                                        USE_PERCENTAGE: { type: "number" },
                                        START_DATE: { type: "date" }
                                    }
                                }
                            },
                            serverPaging: false
                        }                    
                    var mainGridDataSource = new kendo.data.DataSource(ds);
                    var grid = $("#grid").data("kendoGrid");
                      grid.setDataSource(mainGridDataSource);
                    
                    var gridReadFun = function(data){
                        
                        console.log("DATA::",data);
                        var gridDataSource = $("#grid").data("kendoGrid").dataSource;
                        console.log("FIND gridDataSource:",gridDataSource);
                        gridDataSource.data(data);
                    }
                    
                    
                    var gridData = [
                                    {
                                        "START_DATE": "2011-11-02T00:00:00",
                                        "USE_PERCENTAGE": 38,
                                        "RESOURCE_ID": "RS_ASSEMBLER",
                                        "USE_TIME": 32400
                                      },
                                      {
                                        "START_DATE": "2011-11-03T00:00:00",
                                        "USE_PERCENTAGE": 75,
                                        "RESOURCE_ID": "RS_ASSEMBLER",
                                        "USE_TIME": 64800
                                      },
                                      {
                                        "START_DATE": "2011-11-04T00:00:00",
                                        "USE_PERCENTAGE": 71,
                                        "RESOURCE_ID": "RS_ASSEMBLER",
                                        "USE_TIME": 61200
                                      }];
                    
                    gridReadFun(gridData); // data set
                    
                    /*
                    $.ajax({
                        url: "http://localhost:8080/rnd/DataServlet",
                        type:'post',
                        success: function(data){
                            gridReadFun(data["RESULT_DATA"]);
                        },
                        error: function(e){
                            console.log("e:"+e.responseText)
                        }
                    })
                    */

                });
            </script>

[Alexander Popov]

Hi bakmeon,

This happens because by design, the fields are not being parsed when passed through the data method. As a result, the START_DATE field remains a string instead of becoming a Date object, and the format is not applied.  My advice is to use a custom read function that fetches the data. Here is a proof of concept example: 

<script>
  $(document).ready(function() {

    var gridData = [
      {
        "START_DATE": "2011-11-02T00:00:00",
        "USE_PERCENTAGE": 38,
        "RESOURCE_ID": "RS_ASSEMBLER",
        "USE_TIME": 32400
      },
      {
        "START_DATE": "2011-11-03T00:00:00",
        "USE_PERCENTAGE": 75,
        "RESOURCE_ID": "RS_ASSEMBLER",
        "USE_TIME": 64800
      },
      {
        "START_DATE": "2011-11-04T00:00:00",
        "USE_PERCENTAGE": 71,
        "RESOURCE_ID": "RS_ASSEMBLER",
        "USE_TIME": 61200
      }];

    $("#grid").kendoGrid({
      height: 350,
      filterable: true,
      sortable: true,
      pageable: true,
      dataBound: function(e) {
        console.log("dataBound" +  e);
      },
      columns: [{
        field:"RESOURCE_ID",
        width: 90
      },{
        field:"USE_PERCENTAGE",
        width: 90
      },{
        field:"START_DATE",
        format :"{0: yyyy-MM-dd HH:mm}",
        width: 90
      }
               ]
    });

    var ds = {
      type: "json",
      transport: {
        read: function(o) {
                     /*
                $.ajax({
                    url: "http://localhost:8080/rnd/DataServlet",
                    type:'post',
                    success: function(data){
                            o.success(data["RESULT_DATA"]);
                    },
                    error: function(e){
                        console.log("e:"+e.responseText)
                    }
                })
                */
          o.success(gridData);
        }
      },
      schema: {
        model: {
          fields: {
            RESOURCE_ID: { type: "string" },
            USE_PERCENTAGE: { type: "number" },
            START_DATE: { type: "date" }
          }
        }
      },
      serverPaging: false
    }

    var grid = $("#grid").data("kendoGrid");
    var mainGridDataSource = new kendo.data.DataSource(ds);
    grid.setDataSource(mainGridDataSource);
  });
</script>

Regards,
Alexander Popov
Telerik