InLine Editing on Grid DateTime Column. Where is DateTimePicker?

[Daniel]

Hi,

i'm trying to do some inPlace editing in Kendo Grid.

When i click on a DateTime Column, i'm expecting a DateTimePicker to appear, but i only shows the Error: "XXX is not valid date" ==> have a look at the attached image.

@(Html.Kendo().Grid<Roche.LabData.Web.Models.MappingRuleViewModel>()
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(m => m.SalesOrganization);
        columns.Bound(m => m.CustomerNumber);
        columns.Bound(m => m.DeviceName);
        columns.Bound(m => m.EntityName);
        columns.Bound(m => m.OldValue);
        columns.Bound(m => m.NewValue);
        columns.Bound(m => m.StartDate).Format("{0:d}");
        columns.Bound(m => m.EndDate).Format("{0:d}");
        columns.Command(command => command.Custom("Deactivate").Click("clickDeactivate"));
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Read(read => read.Action("MappingRules_Read", "MappingRules"))
        .Update(read => read.Action("MappingRules_Update", "MappingRules"))
        .Events(events => events.Error("error_handler"))
        .Model(model => {
            model.Id(m => m.MappingRuleId);
            model.Field(p => p.SalesOrganization).Editable(false);
            model.Field(p => p.CustomerNumber).Editable(false);
            model.Field(p => p.DeviceName).Editable(false);
            model.Field(p => p.EntityName).Editable(false);
            model.Field(p => p.OldValue).Editable(false);
            model.Field(p => p.NewValue).Editable(false);
            model.Field(p => p.StartDate).Editable(false);
            // This column should be "InPlace editable"
            model.Field(p => p.EndDate).Editable(true);
        })
    )
)

My ViewModel looks like this:

public class MappingRuleViewModel
    {
        public Guid MappingRuleId { get; set; }
        public string SalesOrganization { get; set; }
        public string CustomerNumber { get; set; }
        public string DeviceName { get; set; }
        public string EntityName { get; set; }
        public string OldValue { get; set; }
        public string NewValue { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
        public bool IsActive { get; set; }
        public string CreatedBy { get; set; }
        public DateTime ModifiedDate { get; set; }
    }

I'm using Kendo 2013.1.514

Any help is appreciated.

[Petur Subev]

Hello Daniel,

The issue that you have seems to be similar to the one here:

http://docs.kendoui.com/getting-started/framework/globalization/overview


Could you please check if setting the culture to a culture with the same date format solves the problem?

http://www.kendoui.com/forums/ui/date-time-pickers/datepicker-value---gt-invalid-date-time-format.aspx


Kind Regards,
Petur Subev
Telerik

[Daniel]

Hello Petur,

Atanas Korchev solved my problem, i thought you will also mark it as solved in the forum.

I fogot to put the editor templates in the right location:

The Kendo Grid relies on ASP.NET MVC editor templates to define the editing UI of the columns (in inline mode). We provide a set of editor templates for editing dates and numbers. To use them you need to copy the \wrappers\aspnetmvc\EditorTemplates\razor directory from the Kendo UI distribution to ~/Views/Shared/ folder. Rename the folder to ~/Views/Shared/EditorTemplates. This is the default location which ASP.NET MVC uses when looking for editor templates.

Best regards,
Daniel

BTW: Your support is awesome! Thanks a lot!

[Herin]

I have follow the same way by using \wrappers\aspnetmvc\EditorTemplates\razor DateTime template. But it will give the following error as shown in the attached images.
I have bind the columns in  kendo Grid is as follow : 

  columns.Bound(k => k.SevenDaysFrom).Format("{0:dd.MM.yyyy}").EditorTemplateName("DateTime").Width(30);
 columns.Bound(k => k.SevenDaysTo).Format("{0:dd.MM.yyyy}").EditorTemplateName("DateTime").Width(30);

Here DateTime is the Template for DateTimePicker 
Validation Error message : ' The <fieldname> must be a date'.
What is the solution for this? Please help.

[Marcel Härry]

Herin
Your column binding is ok, you must also load this script and set your culture:
<script src="@Url.Content("~/Scripts/kendo/2013.3.1324/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.3.1324/cultures/kendo.culture.de-CH.min.js")"></script>
<script type="text/javascript">
    kendo.culture("de-CH");
</script>