kendo grid date format problem.

2 posts, 0 answers
  1. kyongho
    kyongho avatar
    2 posts
    Member since:
    Nov 2015

    Posted 07 Jun 2016 Link to this post

    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>

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 08 Jun 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top