Grid Inline Editing with TimeSpan and Timestamp

[Anil]

Having following issues when I try to implement inline editing on a table with a Timestamp field and couple of TimeSpan fields:

Data doesn't gets updated and following error is displayed.
Following message is displayed: Error! The requested URL returned 500 - Internal server Error

I converted the TimeSpan fields to DateTime in View Model. Also, Timestamp field is displayed as string in the Grid column. I had to do this as after reading the threads on MVC Grid forum - I came to conclusion that grid does not support Timestamp and timespan fields. 

Attached is the code of the sample project

Thank you

Anil Panjwani

[Anil]

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

[Daniel]

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