Dates Format issue in Kendo

4 posts, 0 answers
  1. Monika
    Monika avatar
    2 posts
    Member since:
    Dec 2013

    Posted 17 Apr 2014 Link to this post

    Hi,

    I'm returned a list of java objects in my controller and using kendo taglibs to successfully outputting the data, but I'm having some issues displaying the date correctly for one my attributes. The attribute I'm returning is a Date object.

    It's been outputted as a numeric i.e. 1342438812000. I thought I may need to format and or parse the date.

    I've tried to update the grid column to

     <kendo:grid-column title="DatePublished" field="datePublished" width="110" format="{0:MM/dd/yyyy}" template="kendo.toString(datePublished, 'MM/dd/yyyy')"/>

    or
    <kendo:grid-column title="DatePublished" field="datePublished" width="110" format="{0:MM/dd/yyyy}" template='#= kendo.toString(datePublished, "yyyy/MM/dd") #'/>

    though I'm having little luck outputting the date format correctly..

    I could change it to a string in java, though I want to add some filtering to the date when I have it outputted.

    Anyone have any ideas?

    Thanks
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 21 Apr 2014 Link to this post

    Hello Monika,

    Could you please check if you missed to specify the field as a date? Please check the example here:

    http://demos.telerik.com/kendo-ui/web/grid/remote-data.html?jsp

        <kendo:dataSource-schema data="data" total="total" groups="data">
                <kendo:dataSource-schema-model>
                    <kendo:dataSource-schema-model-fields>
                        <kendo:dataSource-schema-model-field name="orderId" type="number" />
                        <kendo:dataSource-schema-model-field name="freight" type="number" />
                        <kendo:dataSource-schema-model-field name="orderDate" type="date" />
                        <kendo:dataSource-schema-model-field name="shipName" type="string" />
                        <kendo:dataSource-schema-model-field name="shipCity" type="string" />
                    </kendo:dataSource-schema-model-fields>
                </kendo:dataSource-schema-model>
            </kendo:dataSource-schema>
    </kendo:dataSource>


    Kind Regards,
    Petur Subev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. UI for ASP.NET AJAX banner
  4. Monika
    Monika avatar
    2 posts
    Member since:
    Dec 2013

    Posted 22 Apr 2014 in reply to Petur Subev Link to this post

    Hi Petur,

    Yes I was adding the date option to the schema.

    Here is my code.

    <kendo:grid name="grid" groupable="true" filterable="true" style="height:380px;">
        <kendo:grid-pageable refresh="true" pageSizes="true" buttonCount="5">
        </kendo:grid-pageable>
        <kendo:grid-columns>
            <kendo:grid-column title="AccountNumber" field="accountNumber" width="80" />
            <kendo:grid-column title="Name" field="uename" width="110"/>
            <kendo:grid-column title="Description" field="description" width="140" />                       
            <kendo:grid-column title="DocumentType" field="documentType" width="80" />
            <kendo:grid-column title="DatePublished" field="datePublished" width="110"/>
        </kendo:grid-columns>
        <kendo:dataSource pageSize="10">
             <kendo:dataSource-schema>
                <kendo:dataSource-schema-model>
                    <kendo:dataSource-schema-model-fields>    
                        <kendo:dataSource-schema-model-field name="AccountNumber" type="string" />         
                        <kendo:dataSource-schema-model-field name="Name" type="string" />                    
                        <kendo:dataSource-schema-model-field name="Description" type="string" />
                        <kendo:dataSource-schema-model-field name="DocumentType" type="string" />                                               
                        <kendo:dataSource-schema-model-field name="DatePublished" type="date" />
                    </kendo:dataSource-schema-model-fields>
                </kendo:dataSource-schema-model>
            </kendo:dataSource-schema>
            <kendo:dataSource-transport>
                <kendo:dataSource-transport-read url="${transportReadUrl}"/>
            </kendo:dataSource-transport>
        </kendo:dataSource>
    </kendo:grid>


    The one thing I noticed between your example and the version I was using was you were exposing the dataSource as json. I was just following the example http://demos.telerik.com/kendo-ui/web/grid/index.html?jsp where the list of objects are returned.

    I updated my code to return json though I'm getting the same result.

    Looking at my object the attribute is

    private Date datePublished;

    Thanks.
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 24 Apr 2014 Link to this post

    Hello Monika,

    Everything looks correct, we have the same demo in our offline JSP demos (the code for which you see in the online examples under the JSP section) which is working fine. 

    It seems that the server method that serves the Ajax request does not send the Data fields in the right format. Could you please share how does your transportReadUrl server method look like, and also share what is the raw response from the server.

    Here is how our method and raw response look like:

    @RequestMapping(value = "/remote-data/read", method = RequestMethod.POST)
    public @ResponseBody DataSourceResult read(@RequestBody DataSourceRequest request) {
        return order.getList(request);
    }

    {
        "total": 830,
        "data": [{
            "orderId": 10268,
            "customerId": "GROSR",
            "employeeId": 8,
            "shipName": "GROSELLA-Restaurante",
            "shipCity": "Caracas",
            "freight": 66.29,
            "orderDate": "1996-07-30T00:00:00.000Z",
            "shippedDate": "1996-08-02T00:00:00.000Z",
            "shipAddress": "5ª Ave. Los Palos Grandes",
            "shipCountry": "Venezuela"
        }, {
            "orderId": 10269,
            "customerId": "WHITC",
            "employeeId": 5,
            "shipName": "White Clover Markets",
            "shipCity": "Seattle",
            "freight": 4.56,
            "orderDate": "1996-07-31T00:00:00.000Z",
            "shippedDate": "1996-08-09T00:00:00.000Z",
            "shipAddress": "1029 - 12th Ave. S.",
            "shipCountry": "USA"
        }
          //...
    ],
        "aggregates": null
    }

    Also here is how the model is defined:

    public class Order {
        private int orderId;
        private String customerId;
        private int employeeId;
        private String shipName;
        private String shipCity;
        private double freight;
        private Date orderDate;
        private Date shippedDate;
        private String shipAddress;
        private String shipCountry;
         
        @Id
        @Column(name="OrderID")
        @GeneratedValue(strategy=GenerationType.AUTO)
        public int getOrderId() {
            return orderId;
        }
     
        public void setOrderId(int orderId) {
            this.orderId = orderId;
        }
     
        @Column(name="CustomerID")
        public String getCustomerId() {
            return customerId;
        }
     
        public void setCustomerId(String customerId) {
            this.customerId = customerId;
        }
         
        @Column(name="Freight")
        public double getFreight() {
            return freight;
        }
     
        public void setFreight(double freight) {
            this.freight = freight;
        }
         
        @Column(name="OrderDate")
        @JsonSerialize(using=IsoDateJsonSerializer.class)
        public Date getOrderDate() {
            return orderDate;
        }
     
        public void setOrderDate(Date orderDate) {
            this.orderDate = orderDate;
        }
         
        @Column(name="ShippedDate")
        @JsonSerialize(using=IsoDateJsonSerializer.class)
        public Date getShippedDate() {
            return shippedDate;
        }
     
        public void setShippedDate(Date shippedDate) {
            this.shippedDate = shippedDate;
        }
         
        @Column(name="EmployeeID")
        public int getEmployeeId() {
            return employeeId;
        }
     
        public void setEmployeeId(int employeeId) {
            this.employeeId = employeeId;
        }
         
        @Column(name="ShipName")
        public String getShipName() {
            return shipName;
        }
     
        public void setShipName(String shipName) {
            this.shipName = shipName;
        }
     
        @Column(name="ShipCity")
        public String getShipCity() {
            return shipCity;
        }
     
        public void setShipCity(String shipCity) {
            this.shipCity = shipCity;
        }
         
        @Column(name="ShipCountry")
        public String getShipCountry() {
            return shipCountry;
        }
     
        public void setShipCountry(String shipCountry) {
            this.shipCountry = shipCountry;
        }
         
        @Column(name="ShipAddress")
        public String getShipAddress() {
            return shipAddress;
        }
     
        public void setShipAddress(String shipAddress) {
            this.shipAddress = shipAddress;
        }
    }

    Let us know your setup.

    Kind Regards,
    Petur Subev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
UI for ASP.NET AJAX banner