This is a migrated thread and some comments may be shown as answers.

InLine Editing on Grid DateTime Column. Where is DateTimePicker?

4 Answers 2769 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Daniel asked on 22 May 2013, 11:47 AM

inlineediting.png

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.

4 Answers, 1 is accepted

Accepted

answered on 24 May 2013, 05:59 AM

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!

answered on 13 Sep 2013, 01:08 PM

err.jpg

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.