Kendo Grid Inline edit kendo timepicker not changing value

[Adil]

Hi I have grid with inline editing when i want to click cell to update i can see my timepicker and i can select value but when i pass next cell value is disappearing and not select or changing anything
How can i solve it?

@( Html.Kendo().Grid<MockUpForeNet.Controllers.CardDetailController.Days>()
        .Name("timegrid")
         .DataSource(d => d.Ajax().Read("TimeGridBinding", "CardDetail", new { rule = rule }).Update("UpdateTime","CardDetail").Model(keys =>
    {
       keys.Id(k => k.DayId);
       keys.Field(c => c.DayName).Editable(false);
       keys.Field(c => c.DayId).Editable(false);
       keys.Field("TimeStart", typeof(string)).Editable(true);
       keys.Field("TimeEnd", typeof(string)).Editable(true);
    }).PageSize(7))
               .Columns(c =>
                {
                    c.Bound(p => p.DayId).Width(100).Title(" ").ClientTemplate("#= chk2(data) #").Sortable(false);
                    c.Bound(e => e.DayName).Width(200).Title("Day");
                    c.Bound(e => e.TimeStart).Width(200).Title("Start Time").EditorTemplateName("StartTimeEditor");
                    c.Bound(e => e.TimeEnd).Width(200).Title("End Time").EditorTemplateName("EndTimeEditor");
                })
               .ToolBar(commands =>
                {
                    commands.Save().SaveText(" ").CancelText(" ");
                })
       .Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
       .Sortable()
       .ColumnMenu()
    )

[Adil]

Sorry I Posted some missing data

Here my Template 

@(Html.Kendo().TimePicker().Name("txtend").Format("HH:mm").Value("23:59").Interval(30))
Here my model

    public class Days
    {
        public int DayId { get; set; }

        public string DayName { get; set; }

        [DataType(DataType.Time)]
        public DateTime TimeStart { get; set; }
        public DateTime TimeEnd { get; set; }
    }
Here example of how to bind data

                    Days d = new Days();
                    d.DayId = 1;
                    d.DayName = "Monday";
                    d.TimeStart = Convert.ToDateTime("00:00");
                    d.TimeEnd = Convert.ToDateTime("23:59");

[Nikolay]

Hello Adil,

Thank you for sharing the Grid declaration.

I have examined the code and may have found what is causing this issue. The DatePicker name is set to "txtend" but the grid does not have a column with such a field, the field name seems to be "TimeStart". When such a mismatch occurs the binding will fail to work thus the value from the picker will not be sent to the controller. 

As a possible resolution I would suggest using a DatePickerFor as shown below:

@model DateTime

@Html.Kendo().DatePickerFor(m => m)

For your convenience, I am attaching a small MVC Grid demo demonstrating the above. Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[PATRICE]

Thank you Nikolay,

it solves the issue I had. I fixed my issue this way:

Grid column definition that is editable

               {
                    field: "time",
                    title: "@Localizer["Time"]",
                    width: 150,
                    template: "#= kendo.toString(time, 't') #",
                    editor: dateTimeEditor2
                }

 

from this:

 function dateTimeEditor2(container, options) {
        $('<input type="text" />')
            .appendTo(container)
            .kendoTimePicker({
                format: "HH:mm",
                value: kendo.toString(new Date(options.model.time), 'HH:mm')
            });
    }

 

to this:

 function dateTimeEditor2(container, options) {
        $('<input type="text" name="' + options.field +'"  id="' + options.field +'" />')
            .appendTo(container)
            .kendoTimePicker({
                format: "HH:mm",
                value: kendo.toString(new Date(options.model.time), 'HH:mm')
            });
    }

[Anton Mironov]

Hi Patrice,

Thank you for sharing the approach with the community.

If further assistance is needed - do not hesitate to contact the team.

Kind Regards,
Anton Mironov