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

Answer 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");

Answer 2

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

Answer 3

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

Answer 4

Can also use:

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

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

Answer 5

Try instead this,this will work.

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

Answer 6

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.

Answer 7

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.

Answer 8

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