I was able to fix the error by adding the RouteKey as follows:
keys.Add(p => p.EmployeeID).RouteKey("EmployeeID");
However I am still having following issues:
1. Grid do not refreshes on Update.
2. in Update Mode - startTime and endTime columns are not pre-populated with database values
Here is the View code and controller code



@(Html.Telerik().Grid<TelerikMvcApplication1.Models.EmployeeViewModel>()
.Name("EmployeeGrid")
.BindTo(Model)
.DataKeys(keys =>
{
keys.Add(p => p.EmployeeID).RouteKey("EmployeeID");
})
.ToolBar(commands => commands.Insert().ButtonType(type).ImageHtmlAttributes(new { style = "margin-left:0" }))
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("_EmployeeSelect", "Employee")
.Update("_Edit", "Employee")
.Delete("Delete", "Employee")
.Insert("_Insert", "Employee");
})
.Columns(columns =>
{
columns.Bound(e => e.FirstName).Width(100);
columns.Bound(e => e.LastName).Width(100);
columns.Bound(e => e.Title).Width(200);
columns.Bound(e => e.Country).Width(50);
columns.Bound(e => e.City).Width(80);
columns.Bound(e => e.startDateTime).Width(140)
.Format("{0:HH:mm:ss}")
.ClientTemplate("<#=e.startDateTime.toString(\"HH:mm:ss\")#>");
columns.Bound(e => e.endDateTime).Width(100)
.Format("{0:HH:mm:ss}")
.ClientTemplate("<#=e.endDateTime.toString(\"HH:mm:ss\")#>");
columns.Bound(e => e.sTimestamp).Width(100);
columns.Bound(e => e.timestamp).Width(100).Hidden(true);
columns.Command(cmd => cmd.Edit()).Width(100);
columns.Command(cmd => cmd.Delete()).Width(100);
})
        .Editable(editing => editing.Mode(mode))
        .Pageable()
        .Scrollable()
        .Sortable()
)

       public ActionResult _Edit(int employeeID, EmployeeViewModel model)
        {
model.timestamp = model.sTimestamp.StringToTimestampArray();
model.startTime = model.startDateTime - new DateTime(DateTime.Today.Year,
DateTime.Today.Month, DateTime.Today.Day, 0, 0, 0);
model.endTime = model.endDateTime - new DateTime(DateTime.Today.Year,
DateTime.Today.Month, DateTime.Today.Day, 0, 0, 0);
var emp = dbContext.Employees.FirstOrDefault(e => e.EmployeeID == employeeID);
emp.EndTime = model.endTime;
emp.StartTime = model.startTime;
emp.Timestamp = model.timestamp;
emp.FirstName = model.FirstName;
emp.LastName = model.LastName;

TryUpdateModel(emp);
dbContext.SubmitChanges();
return View(new GridModel(GetEmployees()));
}

Thanks

Anil

Hello Anil Panjwani,

Yes, the TimeSpan type isn't supported as there is no representation in JavaScript . Also, the default ModelBinder can't handle this type.
Regarding the problems you are experiencing:

1. The Grid doesn't refresh after updating because the client template throws an error. The error isn't thrown initially because the first time the Grid is bound on the server and the ClientTemplate isn't used. You should specify only the name of the field without the lambda parameter.
   Also, the JavaScript toString method doesn't support formatting. You can use the $.telerik.formatString method to show only the time portion of the date. For example:
   
   .ClientTemplate("<#= $.telerik.formatString('{0:HH:mm:ss}', startDateTime)#>")
   While this would work, it isn't necessary to use ClientTemplate in this case. Setting the Format should be sufficient.
2. The TimePicker isn't populated with the property value because they have different formats. You should set the format to be "{0: t}" or set the [DataType(DataType.Time)] attribute on the property in order to avoid this. If you want to use different format you should also set it on the TimePicker in the editor template.

I attached the project with the necessary modifications added. I hope this helps.

All the best,
Daniel
the Telerik team