Dates Format issue in Kendo

[Monika]

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

[Petur Subev]

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

 

 

[Monika]

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.

[Petur Subev]

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