剑道网格内联编辑剑道时间选择器不会更改值 [英] Kendo Grid Inline edit kendo timepicker not changing value

问题描述

当我想单击单元格来更新时，我可以进行内联编辑，可以看到我的时间选择器，并且可以选择值，但是当我通过下一个单元格时，值消失了，没有选择或更改任何内容

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

我该如何解决?

    @( 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()
    )

这是我的示例编辑器

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

这是我的模特

    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");

推荐答案

将带有编辑器模板的Colum添加为

Add Colum with editor template as

columns.Bound(c => c.TimeStart).Title("Trainer").EditorTemplateName("StartTimeEditor").Width(250);

您可以按以下方式更改的编辑器模板

Editor template you can change as follows

@using System.Collections

@(Html.Kendo().DateTimePicker()
.Name("TimeStart")
.TimeFormat("hh:mm")
    .HtmlAttributes(new { style = "width:100%",data_format = "hh:mm" })
        .Events(e =>
         {
             e.Change("DtChange");
         })
)

使用选定的rowID如下编写更改函数Dtchange()

Write a change function Dtchange() as follows with selected rowID

    function Dtchange() {
    var dataSource = $("#Grid").data("kendoGrid").dataSource;
    var data = dataSource.data();
    $.each(data, function (index, rowItem) {
        var date = data[index].TimeStart;
        var newdate = moment(date).format('hh:mm');
        if (newdate != 'Invalid date') {
            data[index].set('TimeStart', newdate );
        }
        else {
            data[index].set('TimeStart', "");
        }
    })
}

这篇关于剑道网格内联编辑剑道时间选择器不会更改值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！