Error on date formatting issue on Grid

[Silver Lightning]

I have a problem on date display in grid. I already read some  issue here in this forums but still there's no solution.

My problem is the "p.CreatedDate" field which is not displaying properly. See attached image file

I hope you could help me on this.

Thank you and God bless...

Here's my code below:

Html.Kendo().Grid(Of SPIMS.ViewModel.EventViewModel.Index)() _
                .Name("grid") _
                .Sortable _
                .Columns(Sub(c)
                                 c.Bound(Function(p) p.ID).HeaderHtmlAttributes(New With {.style = "text-align: center; font-weight: bold"}).Width(10)
                                 c.Bound(Function(p) p.CreatedDate).Format("{0:dd/MM/yyyy}").Width(20).Title("Date").HeaderHtmlAttributes(New With {.style = "text-align: center; font-weight: bold"})
                                 c.Bound(Function(p) p.Source).HeaderHtmlAttributes(New With {.style = "text-align: center; font-weight: bold"}).Width(20)
                                 c.Bound(Function(p) p.Message).HeaderHtmlAttributes(New With {.style = "text-align: center; font-weight: bold"}).Width(50).Title("Description")
                                 c.Command(Sub(commands)
                                                   commands.Custom("View").Click("showDetails")
                                           End Sub).Title(" ").Width(10)
                         End Sub) _
                .Scrollable() _
                .Filterable() _
                .Pageable(Sub(pager)
                                  pager.Input(True)
                                  pager.Numeric(True)
                                  pager.Input(True)
                                  pager.PreviousNext(True)
                                  pager.Refresh(True)
                                  pager.PageSizes(True)
                                  pager.ButtonCount(10)
                          End Sub) _
                .HtmlAttributes(New With {.style = "height:450px;width:900px;"}) _
                .DataSource(Sub(d)
                                    d.Ajax() _
                                    .PageSize(10) _
                                    .Model(Sub(model) model.Id(Function(p) p.ID)) _
                                    .ServerOperation(True) _
                                    .Read(Function(read) read.Action("Model_Read", "Event"))
                            End Sub).Render()

[Jelly Master]

Hi I had a similar issue to you with date formats.

This is what I did. In my Layout Page I include the following: 

1.<script src="@Url.Content("~/Scripts/kendo/2014.1.423/cultures/kendo.culture.en-GB.min.js")"></script>

2.   <script type="text/javascript">

3.       //set current to the "en-GB" culture script

4.       kendo.culture("en-GB");

5.       var culture = kendo.culture();

6.       //console.log(culture);

7.   </script>



Just make sure you include the relavent culture script file in your project.

I have the console statement there just to make sure that culture is being set correctly.

As a failover I also included this in the webconfig

<system.web>
<globalization culture="en-GB" uiCulture="en-GB" />
..... Rest of items rmoved from here
</system.web>

Again changing en-GB to the culture you need.

This seems to work fine for me and I have tested it using your settings as well as variations on this.

[Silver Lightning]

HI JellyMaster,

Thanks for helping me, I tried it but still not working on my side. I add and changed it also from BR to US and still not working.

Any more idea on how could I do it? and to add more, filtering and sorting are not working as well. I made a lot of changes and updates in sorting and filtering based on sample code from telerik and still not working too.

I hope someone could help me on this. Thank you and God bless.

Jess

[Jelly Master]

Do you an example of the page in action that can be tested or a more expanded version of the code to see what is being loaded.

I take it you have ensured you have included the culture files within your application?

Also did you change the references to match your file locations?

If you include the console message does it tell you that it has set the correct culture file?

I take it if you take the date format off then the system loads the date correctly? (US format by default)

[Silver Lightning]

 I think the automapper has something to do with this...
 I only filtered the fields which are not needed to display on my grid.
 Can you give me a sample code on how could I add and convert the date created?
 
 Thank you and God bless..
 
Here's the code of my AutoMapperConfig in my App_Start folder
 
 
        'Event - get entity
        Mapper.CreateMap(Of EventViewModel.Index, Model.Event)() _
        .ForMember(Function(p) p.UserID, Sub(d) d.Ignore()) _
        .ForMember(Function(p) p.Severity, Sub(d) d.Ignore()) _
        .ForMember(Function(p) p.Stacktrace, Sub(d) d.Ignore())
       
        ' Perform mapping
        ' Model
    

        Mapper.CreateMap(Of Model.Event, ViewModel.EventViewModel.Index)() _
       .ForMember(Function(p) p.UserID, Sub(d) d.Ignore()) _
       .ForMember(Function(p) p.Severity, Sub(d) d.Ignore()) _
       .ForMember(Function(p) p.Stacktrace, Sub(d) d.Ignore()) _
       .ForMember(Function(p) p.TotalRowCount, Sub(d) d.Ignore()) 

[Jelly Master]

If you don't apply any formatting to the date time field how does it look? 

Is it still giving you the JSON date format or is it giving you the usual 01/03/2014 14:30:20.000 type format? 

Also excuse my ignorance here but I am correct in that you are using vb.net rather than c# with the razor engine? 

To give you an idea of how I am implementing this here is one of my grids (c# code) 

01.@{
02.    ViewBag.Title = "Index";
03.}
04.
05.<h2>Index</h2>
06.
07.@(
08. Html.Kendo().Grid<MyGridModel>()
09. .Name("CasestudyGrid")
10.   .HtmlAttributes(new { style = "height:600px;" })
11.
12..Columns(columns =>
13.{
14.    columns.Bound(c => c.ID).Visible(false);
15.    columns.Bound(c => c.FirstName).Title("First Name");
16.    columns.Bound(c => c.LastName).Title("Last Name");
17.    columns.Bound(c => c.DateOfBirth).Title("DoB").Format("{0:dd MMM yyyy}");
18.    columns.Bound(c => c.UPN).Title("UPN");
19.    columns.Bound(c => c.YearGroup).Title("Adno");
20.
21.    columns.Template(@<text></text>).ClientTemplate("<div class='btn-group'><a class='btn btn-sm btn-primary' href='" + @Url.Action("Index", "Student", new { area="ProvisionMap", id="#=ID#" }) + "'>Edit</a>" +
22.                                                    "<a class='btn btn-sm btn-success' href='" + @Url.Action("Details", "New", new { area="CaseStudy", id="#=ID#" }) + "'>View</a>" +
23.                                                    "</div>");
24.
25.})
26.
27..DataSource(datasource =>
28.{
29.    datasource.Ajax()
30.
31.        .Read(read => read.Action("ReadSearch", "Student", new { area = "ProvisionMap" }))
32.
33.        .Model(model =>
34.        {
35.            model.Id(field => field.ID);
36.
37.        })
38.        .Events(events => events.Error("NewError_Handler"));
39.
40.
41.})
42..Pageable(page => page.PageSizes(new int[] { 10, 20, 50, 100, 250, 1000 }).Refresh(true))
43..Sortable()
44..Groupable( group => group.Enabled(true))
45..Filterable()
46..Scrollable()
47.    .Resizable(resize => resize.Columns(true))
48..ColumnMenu()
49.)

See the attached image for how this looks. (I have had to blur out most of the info but you get the idea hopefully)


 

[Silver Lightning]

Thanks JellyMaster,

I'm using vb.net 2013, and even if I remove the format, it still shows JSON date format ...
any idea on how could I implement timezone on ViewModel class?

Here's my existing code:

Public Class EventViewModel  
  Public Class Index
        Inherits IndexBaseClass
        Public Property UserID As Integer
        Public Property Severity As ViewModelConstant.EventSeverity
        Public Source As String
        Public Message As String
        Public Stacktrace As String
        Public CreatedDate As DateTime    'How would I implement TimeZoneInfo here?
   End Class
End Class

[Jelly Master]

1.public string StringifyDateTime
2.{
3. get
4.{
5.       return CreatedDateTime.ToString("date time format");
6.
7.}
8.}

This should help for you.

http://msdn.microsoft.com/en-us/library/bb382770(v=vs.110).aspx


Alternatively you could just have a public DateTime Get Method that does something like this:

[Silver Lightning]

Thank you very much Jelly Master, God bless...