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)/

Solution 1

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

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

Or

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

Solution 2

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') #");

Solution 3

.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.

Solution 4

Can also use:

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

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

Solution 5

Try instead this,this will work.

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

View more solutions

Comments

[leodeoliveira]

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.

[Void]

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.

[Milan]

Its kind of a custom template that will format your DateTime in pattern provided by you in kendo.parseDate().

[Julian Dormon]

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.

[piris]

Or something like .Format("{0:G}")

[PSR]

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.

[Marc]

Works well for display but the editor doesn't get the format and therefore shows an error message about invalid date. Any ideas?

[piris]

Would making the appropriate format in your ViewModel work?

[slee423]

Would this way allow for grid filtering to work correctly?

[user1477388]

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 docs.telerik.com/kendo-ui/api/javascript/ui/grid/configurati‌​on/… (I couldn't easily find a .NET MVC reference for this).

[slee423]

Thank you for your response. I'll have a look into this :)