New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Configure Grids to Edit TimeSpan Properties
Environment
Product | Telerik UI for ASP.NET MVC Grid |
Product version | 2025.1.227 |
Description
How can I use TimeSpan
fields in an editable Grid?
Solution
Follow the next steps to implement a TimePicker editor for the TimeSpan
field in an InLine editable Grid:
-
Define the editable Grid:
Razor@(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridEditTimespan.Models.ViewModel>() .Name("grid") .Columns(columns => { columns.Command(comm => { comm.Edit(); }); columns.Bound(o => o.ID); columns.Bound(o => o.Time).ClientTemplate("#if (data.Time) {# #:kendo.toString(Time.Hours, '00')#:#:kendo.toString(Time.Minutes, '00')#:#:kendo.toString(Time.Seconds, '00')# #}#").EditorTemplateName("TimePickerEditor"); }) .ToolBar(tools => tools.Create()) .DataSource(dataSource => dataSource .Ajax() .ServerOperation(false) .Model(model => { model.Id(o => o.ID); model.Field(o => o.ID).Editable(false); }) .Read(read => read.Action("Read", "Home")) .Update(update => update.Action("Update", "Home")) .Create(create => create.Action("Create", "Home")) ) )
-
Add the following custom JavaScript logic before the Grid definition:
JS<script> kendo.data.binders.widget.timespan = kendo.data.Binder.extend({ init: function (widget, bindings, options) { kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options); this.widget = widget; this._change = $.proxy(this.change, this); this.widget.bind("change", this._change); }, refresh: function () { var value = this.bindings.timespan.get(); var date = null; if (value) { date = new Date(); if (value.Ticks) { date.setHours(value.Hours); date.setMinutes(value.Minutes); date.setSeconds(value.Seconds); } else { var parts = value.split(':'); date.setHours(parts[0]); date.setMinutes(parts[1]); date.setSeconds(parts[2]); } } this.widget.value(date); }, change: function () { var date = this.widget.value(); var value = null; if (date) { value = { Hours: date.getHours(), Minutes: date.getMinutes(), Seconds: date.getSeconds() }; } var input = $('input[data-bind="value:Time"]'); input.val(value.Hours + ":" + value.Minutes + ":" + value.Seconds); input.trigger("change"); }, destroy: function () { this.widget.unbind("change", this._change); } }); </script>
-
Create a custom editor template for the Time property:
Razor@model TimeSpan? @(Html.Kendo().TimePicker() .HtmlAttributes(new { data_skip=true, data_bind = "timespan:Time" }) .Name("timepicker") .Format("HH:mm:ss") ) @Html.HiddenFor(model => model)
To review the complete example, refer to the project on how to configure the Grid to use a TimePicker editor to edit TimeSpan
properties.
More ASP.NET MVC Grid Resources
- ASP.NET MVC Grid Documentation
- ASP.NET MVC Grid Demos
- ASP.NET MVC Grid Product Page
- Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET MVC Forums