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"))
    )
)
C#
public class ViewModel
{
    public int ID { get; set; }
    [Required]
    public TimeSpan Time { get; set; }
}

Add the following custom JavaScript logic before the Grid definition:

<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.

Configure Grids to Edit TimeSpan Properties

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also