DateTime format on grid cells "/Date(******)/"

[Ale]

I everyone, I'm tryng to get datetime information on a grid. I have my model with this data:

new ProdottoView()
{
    IdProdotto = prod.IdProdotto,
    IdDitta = prod.IdDitta,
    CodiceProdotto = prod.CodiceProdotto,
    DataAggiunta = prod.DataAggiunta,
    DataModifica = prod.DataModifica,
    Produttore = new ProduttoreView()
    {
        IdProduttore = prod.IdProduttore,
        IdDitta = prod.IdDitta,
        IdUtente = produ.IdUtente,
        Nome = produ.Nome,
        Eliminato = produ.Eliminato,
        DataModifica = produ.DataModifica,
        DataAggiunta = produ.DataAggiunta
    },
    LinguaProdotto = new LinguaProdottoView()
    {
        IdLinguaProdotto = lingue.IdLinguaProdotto,
        IdLingua = lingue.IdLingua,
        IdProdotto = lingue.IdProdotto,
        Descrizione = lingue.Descrizione,
        DescrizioneBreve = lingue.DescrizioneBreve,
        Nota = lingue.Nota,
        DataAggiunta = lingue.DataAggiunta,
        DataModifica = lingue.DataModifica,
        IdUtente = lingue.IdUtente,
    },
    UnitaDiMisura = new UnitaDiMisuraView()
    {
        IdUnitaDiMisura = udm.IdUnitaDiMisura,
        IdCategoriaMisura = udm.IdCategoriaMisura,
        Nome = udm.Nome,
        Fattore = udm.Fattore,
        Arrotondamento = udm.Arrotondamento,
        Eliminato = udm.Eliminato,
        DataAggiunta = udm.DataAggiunta,
        DataModifica = udm.DataModifica,
        IdUtente = udm.IdUtente,
    },

My Kendo UI grid is formatted with this parameters:

@(Html.Kendo().Grid<ProdottoView>()
          .Name("gridProduct")
                  .Columns(columns =>
                  {
                      columns.Bound(c => c.CodiceProdotto).Width(140);
                      columns.Bound(c => c.LinguaProdotto.Descrizione).Width(190);
                      columns.Bound(c => c.DataAggiunta).Format("{0: dd/MM/yyyy HH.mm.ss}");
                      columns.Bound(c => c.DataModifica).Format("{0: dd/MM/yyyy HH.mm.ss}");
                      columns.Bound(c => c.Produttore.Nome);
                      columns.Bound(c => c.Produttore.DataModifica).Title("ProdMod").Format("{0:MM/dd/yyyy}");
                      columns.Bound(c => c.Produttore.DataAggiunta).Format("{0: dd/MM/yyyy HH.mm.ss}");
                      columns.Bound(c => c.LinguaProdotto.DataAggiunta).Format("{0: dd/MM/yyyy HH.mm.ss}");
                      columns.Bound(c => c.LinguaProdotto.DataModifica).Format("{0: dd/MM/yyyy HH.mm.ss}");
                      columns.Bound(c => c.UnitaDiMisura.DataAggiunta).Format("{0: dd/MM/yyyy HH.mm.ss}");
                      columns.Bound(c => c.UnitaDiMisura.DataModifica).Format("{0: dd/MM/yyyy HH.mm.ss}");
                      columns.Command(cmd => cmd.Edit());
                  })
          .ToolBar(toolbar =>
              toolbar.Create()
          )
          .Sortable()
          .Editable(builder => builder.Mode(GridEditMode.PopUp).TemplateName("ProdottiPopup"))
          .Filterable()
          .ColumnMenu()
          .Groupable()
          .Resizable(rs=>rs.Columns(true))
          .Pageable(builder => builder.PageSizes(new []{2,5,10}))
          .Events(ed=>ed.Edit("onGridEditing"))
          .Scrollable()
          .HtmlAttributes(new { style = "height:800px; width: 95%" })
          .DataSource(ds => ds
              .Ajax()
              .Batch(false)
              .ServerOperation(false)
              .Read(ra => ra.Action("ReadGrid", "Prodotti"))
              .Update(ra => ra.Action("Editing_Update", "Prodotti"))
              .Create(ra => ra.Action("Editing_Update", "Prodotti"))
              .Model(model => model.Id(p => p.IdProdotto))
              .Events(events => events.Error("error"))
          ))

In the attacced image there is the grid result.
Someone can tell me because the first two datetime is sown correctly, instead other datetime is shown as "/Date(********)/" ?

[Jayesh Goyani]

Hello,

Please try with the below code snippet.

{
        field: "ProdMod",
        title: "ProdMod",
        template: "#= kendo.toString(kendo.parseDate(ProdMod, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"
}

OR

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

Please also check below link for more reference.
http://docs.kendoui.com/getting-started/framework/globalization/dateparsing

Let me know if any concern.

Thanks.
Jayesh Goyani

[Ale]

Hello Jayesh,
your solution work fine if I have a datetime directly in modelView, but my case is different.

My modelView is like this:

public class ProdottoView
{
    public int IdProdotto { get; set; }
    public int IdDitta  { get; set; }
    public string CodiceProdotto { get; set; }
    public string DescProdotto { get; set; }
    public DateTime DataAggiunta { get; set; }
    public DateTime DataModifica { get; set; }

    public ProduttoreView Produttore { get; set; }
}

public class ProduttoreView
{
    public int IdProduttore { get; set; }
    public int IdDitta { get; set; }
    public string Nome { get; set; }
    public bool Eliminato { get; set; }
    public DateTime ProdDataAggiunta { get; set; }
    public DateTime ProdDataModifica { get; set; }
    public int IdUtente { get; set; }
}

When I put your code on ProdottoView.DataAggiunta & ProdottoView.DataModifica, it work fine.

But if I try to do this:
      columns.Bound(c => c.Produttore.ProdDataModifica).ClientTemplate("#= kendo.toString(Produttore.ProdDataModifica, \"MM/dd/yyyy hh:mm tt\") #");
it doesn't work. The result in grid is /Date(1387868536207)/

Thanks,
Alessio

[Alexander Popov]

Hello Alessio,

Basically this happens because complex object are not supported out of the box, thus the DataSource cannot decide the type of the nested fields. There are two approaches:

• Bind the Grid to a flattened ViewModel 
• Use a Client template to parse and format the date fields. For example: 

  columns.Bound(c => c.Produttore.DataModifica).Title("ProdMod").ClientTemplate("#= Produttore.DataModifica ? kendo.toString(kendo.parseDate(Produttore.DataModifica), 'MM/dd/yyyy') : '' #");

Regards,
Alexander Popov
Telerik

[Ale]

Hello Alexander,
I tried your solution with Client template and work fine.
But now, when I try to modify my data in a custom popup editor I receive the same datatime format in validation errors.

My test custom popup look like this:

@model ProdottoView

<table>
    <tr>
        <td>Codice Prodotto</td>
        <td>Nome o Descrizione breve</td>
    </tr>
    <tr>
        <td>
            @Html.EditorFor(model => model.CodiceProdotto)
            @Html.ValidationMessageFor(model => model.CodiceProdotto)
        </td>
        <td>
            @Html.EditorFor(model => model.DescProdotto)
            @Html.ValidationMessageFor(model => model.DescProdotto)
        </td>
    </tr>
    <tr>
        <td colspan="2">Produttore</td>
    </tr>
    <tr>
        <td colspan="2">
            @Html.ValidationMessageFor(model => model.Produttore)
            @(Html.Kendo().DropDownListFor(model => model.Produttore)
                    //.Name("produttore")
                  .HtmlAttributes(new { style = "width: 100%" })
                  .DataTextField("Nome")
                  .DataValueField("IdProduttore")
                  .DataSource(source => source.Read(read => read.Action("GetAllProduttoriResult", "Produttori")))
                  )
        </td>
    </tr>
    <tr>
        <td>Data Aggiunta</td>
        <td>Data Ultima Modifica</td>
    </tr>
    <tr>
        <td>
            @Html.ValidationMessageFor(model => model.DataAggiunta)
            @Html.Kendo().DateTimePickerFor(model => model.DataAggiunta).Enable(false).Format("dd/MM/yyyy HH.mm.ss")
        </td>
        <td>
            @Html.ValidationMessageFor(model => model.DataModifica)
            @Html.Kendo().DateTimePickerFor(model => model.DataModifica).Enable(false).Format("dd/MM/yyyy HH.mm.ss")
        </td>
    </tr>
    <tr>
        <td>
            @Html.ValidationMessageFor(model => model.Produttore.DataAggiunta)
            @Html.Kendo().DateTimePickerFor(model => model.Produttore.DataAggiunta).Format("dd/MM/yyyy HH.mm.ss").Enable(false)
        </td>
        <td>
            @Html.ValidationMessageFor(model => model.Produttore.DataModifica)
            @Html.Kendo().DateTimePickerFor(model => model.Produttore.DataModifica).Format("dd/MM/yyyy HH.mm.ss").Enable(false)
        </td>
    </tr>
    <tr>
        <td>
            @Html.ValidationMessageFor(model => model.LinguaProdotto.DataAggiunta)
            @Html.Kendo().DateTimePickerFor(model => model.LinguaProdotto.DataAggiunta).Format("dd/MM/yyyy HH.mm.ss").Enable(false)
        </td>
        <td>
            @Html.ValidationMessageFor(model => model.LinguaProdotto.DataModifica)
            @Html.Kendo().DateTimePickerFor(model => model.LinguaProdotto.DataModifica).Format("dd/MM/yyyy HH.mm.ss").Enable(false)
        </td>
    </tr>
    <tr>
        <td>
            @Html.ValidationMessageFor(model => model.UnitaDiMisura.DataAggiunta)
            @Html.Kendo().DateTimePickerFor(model => model.UnitaDiMisura.DataAggiunta).Format("dd/MM/yyyy HH.mm.ss").Enable(false)
        </td>
        <td>
            @Html.ValidationMessageFor(model => model.UnitaDiMisura.DataModifica)
            @Html.Kendo().DateTimePickerFor(model => model.UnitaDiMisura.DataModifica).Format("dd/MM/yyyy HH.mm.ss").Enable(false)
        </td>
    </tr>
</table>

When I confirm modified data (I modify only "CodiceProdotto", for testing), ModelState tell me that the DateTime format for nested field is incorrect (like /Date(xxxxx)/)

How I can format DateTime in popup editor correctly.

Thanks,
Alessio

[Ale]

UPDATE:

I've seen that if I don't modify the datetime field datetimePickerFor returns me the /Date(xxxxxxxx)/ format, but if I modify the field it return the correct datetime format.

Shown datetime is alwais right.

Thanks,
Alessio

[Alexander Popov]

Hi Alessio,

As I mentioned in my previous reply complex objects are not supported out of the box. You could, however, use the following workaround:

1. Specify a function that will be called right before sending the data to the server using the Data method. For example:   

   .Update(ra => ra.Action("Editing_Update", "Prodotti").Data("convertDates"))

2. Use the convertDates to convert the date fields to a format supported by the model binder. For example:  

   <script type="text/javascript">
       function convertDates(data) {
           data["Produttore.DataModifica"] = data.Produttore.DataModifica ? kendo.toString(data.Produttore.DataModifica, "G") : "";
       }
   </script>

Regards,
Alexander Popov
Telerik

[ajith]

Hi Alexander,

   my viewmodel

public class SecondLevelLocationViewModel
    {
             public string CampanyCode { get; set; }
            [Display(Name="LocLevel1 Code")]
            [Required]
            public string location1code { get; set; }
            [Required]
            [Display(Name = "Location Code")]
            public string location2code { get; set; }

            public string locationCode { get; set; }
            [Required]
            public string Name { get; set; }
            [Required]
            [Display(Name="Short Name")]
            public string ShortName { get; set; }
            [ScaffoldColumn(false)]
            public string CreatedBy { get; set; }
            [ScaffoldColumn(false)]
            public DateTime CreatedDate { get; set; }
            [ScaffoldColumn(false)]
            public string ModifyBy { get; set; }
            [ScaffoldColumn(false)]
            public DateTime ModifyDate { get; set; }
    }

y i am seeing this error?

[ajith]

my view model

public class SecondLevelLocationViewModel
    {
             public string CampanyCode { get; set; }
            [Display(Name="LocLevel1 Code")]
            [Required]
            public string location1code { get; set; }
            [Required]
            [Display(Name = "Location Code")]
            public string location2code { get; set; }

            public string locationCode { get; set; }
            [Required]
            public string Name { get; set; }
            [Required]
            [Display(Name="Short Name")]
            public string ShortName { get; set; }
            [ScaffoldColumn(false)]
            public string CreatedBy { get; set; }
            [ScaffoldColumn(false)]
            public DateTime CreatedDate { get; set; }
            [ScaffoldColumn(false)]
            public string ModifyBy { get; set; }
            [ScaffoldColumn(false)]
            public DateTime ModifyDate { get; set; }
    }

 

y i am seeing this error?? please help me

[ajith]

Y i am seeing this error.? please help me

[Alexander Popov]

Hi ajith,

This error might appear in case the client and the server are using different cultures. I would recommend checking the Globalization article.

Regards,
Alexander Popov
Telerik

 

 

[Jyothsna]

Hi Alexander Popov's,

I have a date filed In grid  ,I want to format the date ,.I have formatted the date using format:"{0:MM/dd/yyyy}".

But the issue is while sorting ,this field will be treating as string not of date..what is the problem.

field: "DateField",type : "date", format:"{0:MM/dd/yyyy}",
    template:"<a>#=(null == DateField? '' : DateField) #</a>"( written method call inside anchor tag

[Jyothsna]

HI Alexander,

I am unable to find the issue here,Can you help me,

I am using this fields in grid

{field:"dateFieldName: type : "date", format:"{0:MM/dd/yyyy}" -----Here i am getting date in the specified format and sorting also working fine.

 

But in this case its not working     

{field:"dateFieldName: type : "date", format:"{0:MM/dd/yyyy}", template:"<a href \"here called a method and passed parameters #=dateFieldName/>"},

In this case  date is not sorting properly,it is treating as string ..How can i solve this..Please guide me..

[Stefan]

Hello Jyothsna,

Based on the provided information, I can assume that the issue is related to one of the following:

1) The field in not a date in the schema.model:

schema: {
 model: {
  fields: {
   ...
   dateFieldName: { type: "date" },
   ...
  }
 }
}

2) The value which is returned from the function is not date.

Additionally, if the used version is not the latest one, please check if updating will resolve the issue.

If the issues still occurs, please send a runnable example demonstrating the scenario, and I will gladly assist.

Regards,
Stefan
Telerik by Progress

[Peraiah]

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