Kendo date parsing in grid with incell editing, ASP.NET MVC

Question

I know it is a common question on kendo date parsing, however after 2 days of struggle I still can not solve my problem. I have the grid, that dynamically adds records to a nested collection within my model:

@( Html.Kendo().Grid(Model.GTDGoods)
       .Name("GTDGoods")
       .ToolBar(toolbar => { toolbar.Create(); })
       .Columns(columns =>
{
 columns.Bound(p => p.GTD_ID).Hidden()
.ClientTemplate("#= GTD_ID #" +
"<input type='hidden' name='GTDGoods[#= index(data)#].GTD_ID' value='#= GTD_ID #'  />");

columns.Bound(p => p.GOOD_NO)
.ClientTemplate("#= GOOD_NO #" +
"<input type='hidden' name='GTDGoods[#= index(data)#].GOOD_NO' value='#= GOOD_NO #'/>");

columns.Bound(p => p.DATE)
.ClientTemplate("#=kendo.toString(kendo.parseDate(DATE), 'dd.MM.yyyy') #" +
"<input type='hidden' name='GTDGoods[#= index(data)#].DATE' value='#= kendo.toString(kendo.parseDate(DATE), 'dd.MM.yyyy') #'/>");

columns.Command(command => { command.Destroy(); });

})
.Editable(editable => editable.Mode(GridEditMode.InCell)
.CreateAt(GridInsertRowPosition.Bottom))
.DataSource(dataSource =>dataSource.Ajax()
            .Model(model =>{
                            model.Id(u => u.ID);
                            model.Field(u => u.GTD_ID).DefaultValue(Model.ID);
                           })
.ServerOperation(false)))

I receive the collection on server and everything works fine, except DATE property.

My GTDGood model has UIHint :

[UIHint("Date")]
public DateTime DATE { get; set; }

And Date editor template is:

 @model DateTime?

<script src="~/scripts/kendo/kendo.culture.ru-ru.js"></script>
<script type="text/javascript">    
    kendo.culture("ru-RU");
</script>

@(Html.Kendo().DatePickerFor(m => m))

The problem rises when I change the value of DATE in grid, the error message shows "The field DATE must be a date" and "The specified value "01/01/0001" does not conform to the required format, "yyyy-MM-dd" . Even if I type a date in "yyyy-MM-dd" format the datepicker texbox shows null. Also, my datepicker works fine outside the grid, for ex. when I use it like @Html.EditorFor(e=>e.DATE) .

Any help is highly appreciated.

Answer 1

We have finally found the solution by adding this to _Layout.cshtml :

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

    @{
        var culture = System.Threading.Thread.CurrentThread.CurrentCulture.ToString();
    }
    <script>
        kendo.culture("@culture");
        var culture = kendo.culture();
        culture.calendar.patterns.F = "dd/MM/yyyy";
    </script>

Answer 2

If (as) you have:

public DateTime DATE { get; set; }

there should be nothing to "parse" here:

kendo.toString(kendo.parseDate(DATE), 'dd.MM.yyyy')

but rather just formatting directly:

kendo.toString(DATE, 'dd.MM.yyyy')

Or perhaps, no formatting at all:

columns.Bound(p => p.DATE)
.ClientTemplate("#= DATE #" +
"<input type='hidden' name='GTDGoods[#= index(data)#].DATE' value='#= DATE #'/>");

Answer 3

Have you tried adding the Format onto the DatePickerFor?

@(Html.Kendo().DatePickerFor(m => m)).Format("dd.MM.yyyy").Culture("ru-RU"));

or

@Html.Kendo().DatePickerFor(m => m).Format("dd.MM.yyyy").Culture("ru-RU");

Answer 4

Change:

[UIHint("Date")]
public DateTime DATE { get; set; }

to

[UIHint("Date")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd.MM.yyyy}")]
public DateTime DATE { get; set; }

Answer 5

    //This code works for me

    @(Html.Kendo().Grid<DemoKendoScheduler.Models.DateParsing>()
           .Name("GTDGoods")
           .ToolBar(toolbar => { toolbar.Create(); })
           .Columns(columns =>
    {
        columns.Bound(p => p.GTD_ID).Hidden()
       .ClientTemplate("#= GTD_ID #" +
       "<input type='hidden' name='#= GTD_ID#' value='#= GTD_ID #'  />");

        columns.Bound(p => p.GOOD_NO)
        .ClientTemplate("#= GOOD_NO #" +
        "<input type='hidden' name='#= GOOD_NO#' value='#= GOOD_NO #'/>");

        columns.Bound(p => p.DATE)
        .ClientTemplate("#=kendo.toString(kendo.parseDate(DATE), 'dd.MM.yyyy') #" +
        "<input type='hidden' name='#= DATE#]' value='#= kendo.toString(kendo.parseDate(DATE), 'dd.MM.yyyy') #'/>");

        columns.Command(command => { command.Destroy(); });

    })
    .Editable(editable => editable.Mode(GridEditMode.InCell)
    .CreateAt(GridInsertRowPosition.Bottom))
    .DataSource(dataSource => dataSource.Ajax()
                .Model(model =>
                {
                    model.Id(u => u.GTD_ID);
                    //model.Field(u => u.GTD_ID);
                })
    .ServerOperation(false)))

//Model
 public class DateParsing
    {
        public int GTD_ID { get; set; }
        public string GOOD_NO { get; set; }
        [UIHint("Date")]
        public DateTime DATE { get; set; }
    }