Kendo grid date column not formatting

Question

I have a KendoGrid like below and when I run the application, I'm not getting the expected format for date column.

$("#empGrid").kendoGrid({
    dataSource: {
        data: empModel.Value,
        pageSize: 10
    },

    columns: [
        {
            field: "Name",
            width: 90,
            title: "Name"
        },

        {
            field: "DOJ",
            width: 90,
            title: "DOJ",
            type: "date",
            format:"{0:MM-dd-yyyy}" 
        }
    ]
});

When I run this, I'm getting "2013-07-02T00:00:00Z" in DOJ column. Why it is not formatting? Any idea?

Sorry Myzifer, still having issue. Even I tried like template: "#= kendo.toString(Date,'MM/dd/yyyy') #" also. And tried this also http://onabai.wordpress.com/2012/09/28/kendoui-tips-and-tricks-on-dates-in-a-grid/ But no luck :( — jestges, Jul 12 '13 at 04:54
As far as I'm aware the key component is the parameterMap setup and without that you'll have greater difficulties trying to set it up, do you need more details around the parameterMap? — Myzifer, Jul 12 '13 at 08:55
Sorry Myzifer... I tried the same way but somehow it failed :( — jestges, Jul 25 '13 at 15:07
What did it display and can you link my your code so I can see if I can spot anything wrong since sometimes it can be an extra character or the slightest thing which breaks it. — Myzifer, Jul 25 '13 at 15:09
Are you still having issues jestges and if so can you show me the present code your trying to implement? — Myzifer, Jul 29 '13 at 09:08
So jestges any progress or chance of seeing your code so I can spot what might be wrong? — Myzifer, Jul 30 '13 at 08:03

aholtry · Accepted Answer · 2017-02-02T17:37:56.097

126

I found this piece of information and got it to work correctly. The data given to me was in string format so I needed to parse the string using kendo.parseDate before formatting it with kendo.toString.

columns: [
    {
        field: "FirstName",
        title: "FIRST NAME"
    },
    {
        field: "LastName",
        title: "LAST NAME"
    },
    {
        field: "DateOfBirth",
        title: "DATE OF BIRTH",
        template: "#= kendo.toString(kendo.parseDate(DateOfBirth, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"
    },
...

References:

edited Feb 02 '17 at 17:37

answered Aug 14 '13 at 21:53

aholtry

2,723
3
24
26

1

This does work but I would use a parse function on the datasource and then formatting as described below instead of this as it feels cleaner :) – War Oct 08 '14 at 20:30

score 44 · Answer 2 · answered May 06 '14 at 01:22

44

just need putting the datatype of the column in the datasource

dataSource: {
      data: empModel.Value,
      pageSize: 10,
      schema:  {
                model: {
                    fields: {
                        DOJ: { type: "date" }
                            }
                       }
               }  
           }

and then your statement column:

 columns: [
    {
        field: "Name",
        width: 90,
        title: "Name"
    },

    {
        field: "DOJ",
        width: 90,
        title: "DOJ",
        type: "date",
        format:"{0:MM-dd-yyyy}" 
    }
]

answered May 06 '14 at 01:22

miguelug

547
4
10

@Wardy In the example to Grid Binding to remote data demonstrated that it works [link](http://demos.telerik.com/kendo-ui/grid/remote-data-binding). – miguelug Oct 06 '14 at 20:39
3

I did pretty much the exact same thing using the latest version with the only change being the url and it clearly did not work. It seems that kendo HAS to get a date object for formatting in this manner to work and odata results are not always returning a js date object so in order for that to work you have to handle the parse function as shown here: http://onabai.wordpress.com/2012/09/28/kendoui-tips-and-tricks-on-dates-in-a-grid/ ... the problem it seems is that .Net seems to return data in ISO format in situations like when using WebAPI with OData to return the results. – War Oct 07 '14 at 13:42
2

In other words "this works depending on the format of your OData date string" but that's an assumption to which there is no reference in this answer. – War Oct 07 '14 at 13:43
Also worth noting that the format string in this case will output {0: and } parts around the formatted date as js formats that kendo uses are not the same as .Net ones. – War Oct 08 '14 at 20:28
1

This was the right answer for me. There was a misplaced closing bracket so the schema wasn't being considered and my first solution was what aholtry posted. Without the schema and without formatting, the date would be displayed as jestges mentioned in the question (2013-07-02T00:00:00Z). But when I fixed the brackets, the date would display fully verbose (Fri Jan 01 2016 00:00:00 GMT-0800 (Pacific Standard Time)), and at that point was that the `format` attribute started working and I could get rid of the double conversion of the accepted answer. – Andrew Mar 17 '17 at 17:55
1

This is the clean and proper way to do it. 1. declare the column type in the schema, then use the simple format definition as shown above – DavidDunham Dec 19 '17 at 10:29
2

This worked for me, although I have `type: "Date"` on the field and removed this attribute from the column properties. – Andy G Mar 06 '19 at 15:24

score 11 · Answer 3 · edited Aug 18 '14 at 14:48

This is how you do it using ASP.NET:

add .Format("{0:dd/MM/yyyy HH:mm:ss}"); 

    @(Html.Kendo().Grid<AlphaStatic.Domain.ViewModels.AttributeHistoryViewModel>()
            .Name("grid")
            .Columns(columns =>
            {

                columns.Bound(c => c.AttributeName);
                columns.Bound(c => c.UpdatedDate).Format("{0:dd/MM/yyyy HH:mm:ss}");   
            })
            .HtmlAttributes(new { @class = ".big-grid" })
            .Resizable(x => x.Columns(true))
            .Sortable()
            .Filterable()    
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .ServerOperation(false)
                        .Model(model =>
                        {
                            model.Id(c => c.Id);
                        })       
               .Read(read => read.Action("Read_AttributeHistory", "Attribute",  new { attributeId = attributeId })))
            )

score 10 · Answer 4 · edited Aug 14 '13 at 23:29

10

Try formatting the date in the kendo grid as:

columns.Bound(x => x.LastUpdateDate).ClientTemplate("#= kendo.toString(LastUpdateDate, \"MM/dd/yyyy hh:mm tt\") #");

edited Aug 14 '13 at 23:29

Patt Mehta

4,110
1
23
47

answered Aug 08 '13 at 19:01

gurrawar

363
2
8
17

3

this assumes the MVC wrapper is being used on the server ... the samepl suggests that the person asking is using a JS client script to build the grid so ... not helpful. – War Oct 06 '14 at 15:15
@Wardy, syntax is different, format string is the same. understood? look closely, really close – gurrawar Feb 26 '15 at 15:39
You're ignoring my point ... if I asked for a solution to something in C# and you gave me a C++ answer its not helpful ... this is the same concept. Also: Kendo doesn't always behave the same on the client as it does on the server (in fact it doesn't behave the same in 2 different places on the client half the time). – War Feb 28 '15 at 22:27

score 6 · Answer 5 · answered Jan 27 '14 at 10:08

The option I use is as follows:

columns.Bound(p => p.OrderDate).Format("{0:d}").ClientTemplate("#=formatDate(OrderDate)#");

function formatDate(OrderDate) {
    var formatedOrderDate = kendo.format("{0:d}", OrderDate);

    return formatedOrderDate;
}

Myzifer · Answer 6 · 2013-07-12T12:08:35.207

As far as I'm aware in order to format a date value you have to handle it in parameterMap,

$('#listDiv').kendoGrid({
            dataSource: {
                type: 'json',
                serverPaging: true,
                pageSize: 10,
                transport: {
                    read: {
                        url: '@Url.Action("_ListMy", "Placement")',
                        data: refreshGridParams,
                        type: 'POST'
                    },
                    parameterMap: function (options, operation) {
                        if (operation != "read") {
                            var d = new Date(options.StartDate);
                            options.StartDate = kendo.toString(new Date(d), "dd/MM/yyyy");
                            return options;
                        }
                        else { return options; }

                    }
                },
                schema: {
                    model: {
                        id: 'Id',
                        fields: {
                            Id: { type: 'number' },
                            StartDate: { type: 'date', format: 'dd/MM/yyyy' },
                            Area: { type: 'string' },
                            Length: { type: 'string' },
                            Display: { type: 'string' },
                            Status: { type: 'string' },
                            Edit: { type: 'string' }
                        }
                    },
                    data: "Data",
                    total: "Count"
                }
            },
            scrollable: false,
            columns:
                [
                    {
                        field: 'StartDate',
                        title: 'Start Date',
                        format: '{0:dd/MM/yyyy}',
                        width: 100
                    },

If you follow the above example and just renames objects like 'StartDate' then it should work (ignore 'data: refreshGridParams,')

For further details check out below link or just search for kendo grid parameterMap ans see what others have done.

http://docs.kendoui.com/api/framework/datasource#configuration-transport.parameterMap

This only applies the code to "non read operations" ... kinda daft since it's reading the data you want to perform the operation on but also you are applying the format to the transport not the resulting data ... so how does this help? — War, Oct 06 '14 at 15:09

score 0 · Answer 7 · edited Aug 18 '17 at 08:00

0

This might be helpful:

columns.Bound(date=> date.START_DATE).Title("Start Date").Format("{0:MM dd, yyyy}");

edited Aug 18 '17 at 08:00

Cody Gray - on strike

239,200
50
490
574

answered Aug 18 '17 at 07:53

P Vallambotla

39
2

Kendo grid date column not formatting

7 Answers7

Linked

Related