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

11 posts, 1 answers
  1. Ale
    Ale avatar
    13 posts
    Member since:
    Dec 2013

    Posted 02 Jan 2014 Link to this post

    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(********)/" ?
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 02 Jan 2014 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 02 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Ale
    Ale avatar
    13 posts
    Member since:
    Dec 2013

    Posted 02 Jan 2014 Link to this post

    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
  6. Ale
    Ale avatar
    13 posts
    Member since:
    Dec 2013

    Posted 02 Jan 2014 Link to this post

    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
  7. Ale
    Ale avatar
    13 posts
    Member since:
    Dec 2013

    Posted 03 Jan 2014 Link to this post

    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
  8. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 03 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. ajith
    ajith avatar
    21 posts
    Member since:
    Apr 2015

    Posted 16 May 2015 in reply to Alexander Popov Link to this post

    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?

  10. ajith
    ajith avatar
    21 posts
    Member since:
    Apr 2015

    Posted 16 May 2015 in reply to Alexander Popov Link to this post

    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

  11. ajith
    ajith avatar
    21 posts
    Member since:
    Apr 2015

    Posted 16 May 2015 in reply to ajith Link to this post

    Y i am seeing this error.? please help me
  12. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 20 May 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready