DateTime format on grid cells "/Date(******)/"
2 Answers 2141 Views
Ale
Top achievements
Rank 1
Ale asked on 02 Jan 2014, 10:18 AM
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 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 02 Jan 2014, 01:50 PM
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
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
- by
Ale
Top achievements
Rank 1
on 02 Jan 2014, 02:16 PM
0
Alexander Popov
Telerik team
answered on 02 Jan 2014, 02:03 PM
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!
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
- by
Ale
Top achievements
Rank 1
on 02 Jan 2014, 03:08 PM
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
- by
Ale
Top achievements
Rank 1
on 03 Jan 2014, 07:39 AM
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!
- by
Alexander Popov
Telerik team
on 03 Jan 2014, 02:01 PM

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?

- by
ajith
Top achievements
Rank 1
on 16 May 2015, 07:01 AM
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

- by
ajith
Top achievements
Rank 1
on 16 May 2015, 07:03 AM
Y i am seeing this error.? please help me
- by
ajith
Top achievements
Rank 1
on 16 May 2015, 07:05 AM
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!
 
- by
Alexander Popov
Telerik team
on 20 May 2015, 07:35 AM

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
- by
Jyothsna
Top achievements
Rank 1
on 22 Feb 2017, 12:25 PM

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

- by
Jyothsna
Top achievements
Rank 1
on 22 Feb 2017, 12:32 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
- by
Stefan
Telerik team
on 24 Feb 2017, 09:21 AM
This might helpful,
columns.Bound(date=> date.START_DATE).Title("Start Date").Format("{0:MM dd, yyyy}");
- by
Peraiah
Top achievements
Rank 1
on 18 Aug 2017, 07:55 AM
Tags
Grid
Asked by
Ale
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Alexander Popov
Telerik team
Share this question
or