Format DateTime in Kendo UI Grid using asp.net MVC Wrapper

Question

I want to build a Kendo UI Grid with format date dd//MM/yyyy. However, all questions that I found about this, it were resolved with code Format("{0:d}");. So, I have tried like a code below:

GridBoundColumnBuilder<TModel> builder = par.Bound(field.Name);

        switch (field.Type.Type)
        {
            case CType.Boolean:
                builder = builder.ClientTemplate(string.Format("<input type='checkbox' #= {0} ? checked='checked' : '' # disabled='disabled' ></input>", field.Name));
                break;
            case CType.Datetime:
                builder = builder.Format("{0:d}");
                break;
            case CType.Decimal:
            case CType.Double:
                builder = builder.Format("{0:0.00}");
                break;
        }

Another formats is works fine, just DateTime do not works.

I had this result for Datetime = /Date(1377020142000)/

Where you able to solve this? Using .Format("{0:dd.MM.yyyy}") I get it display correctly but edit doesn't work. Any ideas? — Marc, Sep 14 '17 at 09:45

score 87 · Accepted Answer · answered Sep 10 '13 at 12:44

87

If you want to display datetime format in kendo grid then do this,

.Format("{0:dd/MM/yyyy}")

Or

builder.ToString("dd/MM/yyyy");

answered Sep 10 '13 at 12:44

Jaimin

7,964
2
25
32

1

Or something like .Format("{0:G}") – piris Aug 20 '16 at 04:28

score 34 · Answer 2 · answered Jul 27 '15 at 21:07

34

The other solutions were close but no cigar... Here's what worked for me:

columns.Bound(c => c.CreatedDate).ClientTemplate("#= kendo.toString(kendo.parseDate(CreatedDate), 'dd/MM/yyyy') #");

answered Jul 27 '15 at 21:07

user1477388

20,790
32
144
264

Would this way allow for grid filtering to work correctly? – slee423 Mar 08 '19 at 10:12
2

Your filtering should be done on the server side, not the client side. You might want to try a .NET MVC equivalent to "ItemTemplate" as used here https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.itemtemplate (I couldn't easily find a .NET MVC reference for this). – user1477388 Mar 08 '19 at 13:58
Thank you for your response. I'll have a look into this :) – slee423 Mar 08 '19 at 14:33
this is what worked for me, the accepted solution didn't work for me. – Emre Bener Feb 21 '23 at 10:13

score 15 · Answer 3 · answered Sep 17 '13 at 19:04

15

.Format("{0:" + System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern + "}");

There may be some other options in System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat that might work for you if that is not what you want.

answered Sep 17 '13 at 19:04

Bryan Hobbs

444
2
4

This was the answer I was looking for. Makes more sense to me because, why force a localized date format on somebody, unless you're sure of their actual location. – Julian Dormon Feb 11 '16 at 17:08
I am trying the same way as you specified but it is not working. I dont want to specify date format. It should take from culture. – PSR Apr 26 '17 at 13:19

score 10 · Answer 4 · answered Aug 20 '16 at 04:28

10

Can also use:

columns.Bound(c => c.DateCreate).Format("{0:G}")

As in http://docs.telerik.com/kendo-ui/framework/globalization/dateformatting

answered Aug 20 '16 at 04:28

piris

1,547
3
22
26

Works well for display but the editor doesn't get the format and therefore shows an error message about invalid date. Any ideas? – Marc Sep 14 '17 at 09:46
Would making the appropriate format in your ViewModel work? – piris Sep 15 '17 at 19:20

score 5 · Answer 5 · answered Jul 19 '14 at 06:34

5

Try instead this,this will work.

.ClientTemplate("#= kendo.toString(kendo.parseDate(Date,'dd/MM/yyyy'), '" +  CurrentDateFormat + "') #");

answered Jul 19 '14 at 06:34

Milan

3,005
1
24
26

Its kind of a custom template that will format your DateTime in pattern provided by you in kendo.parseDate(). – Milan Nov 24 '15 at 05:31

score 1 · Answer 6 · answered Sep 10 '13 at 12:33

1

I don't know about Kendo UI but it looks to me like you want to pass a string formatted date rather than a DateTime object.

The /Date(...)/ output looks like a JSON formatted date from .Net.

I would convert the date to a string using somthing like myDateTime.ToString("dd/MM/yyyy"); before passing it to the control.

answered Sep 10 '13 at 12:33

Void

265
1
3
11

I found something similar to ClientTemplate("#=kendo.toString(MyPropertyDateTime,\"dd/MM/yyyy\") #"); But don't work too. I can't change my property type because I have many datas and it's hard working. – leodeoliveira Sep 10 '13 at 12:42
I think the problem is occurring in the javascript side of the control. The date time there is formatted by MS as the string "/Date(...)/". Two ways to fix it 1/. change the value being passed to a string before it gets to the control. 2/. Modify the js to cope with the date being passed like it is. – Void Sep 19 '13 at 10:43

score 1 · Answer 7 · edited May 23 '17 at 12:34

The core issue is documented really well here. Combining the answers there with other stuff I found, here's what I had to do to get it to work on my project.

In the C# code:

.Template("#= kendo.toString(parseDate(" + field.Name + "), 'dd/MM/yyyy') #");

Then, create a javascript function:

function parseDate(d) {
  d = new Date(parseInt(d.replace(/\/Date\((-?\d+)\)\//gi, "$1"), 10));
  return d;
}

It's a bit of a kluge, but works.

score 0 · Answer 8 · answered Jun 03 '19 at 08:47

Thanks for your answers:

I format a duration in seconds in HH:MM:SS in a Kendo grid column using a ClientTemplate and calling a javascript function:

                .ClientTemplate("#= secToHHMMSS(DurationInSeconds) # ")
                    .Title("Duration")
                    .Width(150);

function secToHHMMSS(s) {
    f = Math.floor;
    g = (n) => ('00' + n).slice(-2);
    return f(s / 3600) + ':' + g(f(s / 60) % 60) + ':' + g(s % 60)
}

Format DateTime in Kendo UI Grid using asp.net MVC Wrapper

8 Answers8

Linked