New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Configure Grids to Edit TimeSpan Properties

Environment

ProductTelerik UI for ASP.NET MVC Grid
Product version2025.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:

  1. 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"))
        )
    )
  2. 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>
  3. 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

See Also