使用 Telerik MVC 网格，编辑行空白 TimePicker 和 DateTimePicker

Question

我有一个由 Ajax 命令填充的 Telerik 网格，类似于以下内容：

PowerStatusGrid.cshtml

@{Html.Telerik().Grid(Model)
.Name("PowerStatusGrid")
.DataKeys(k => k.Add(o => o.StatusItemId))
.Columns(columns =>
{
    columns.Bound(o => o.ItemName).Title("Name").Width(250).ReadOnly(true);
    columns.Bound(o => o.DateTimePicker).Title("Date/Time").Width(150);
    columns.Command(commands =>
    {
        commands.Edit().ButtonType(GridButtonType.BareImage).HtmlAttributes(new { @class = "grid-edit-button" }).ImageHtmlAttributes(new { @alt = "Edit", @title = "Edit" });
        commands.Delete().ButtonType(GridButtonType.BareImage).HtmlAttributes(new { @class = "grid-delete-button" }).ImageHtmlAttributes(new { @alt = "Delete", @title = "Delete" });
    }).Width(90).Visible(KC.UI.Helpers.Helper.CanSaveResource(Convert.ToInt32(ViewData["resourceId"])));
})
.Resizable(resizing => resizing.Columns(true))
.Scrollable(c => c.Height("100px"))
.DataBinding(dataBinding => dataBinding.Ajax()
                .Select("ResourcePowerStatusGridBinding", "Resource", new { resourceId = ViewData["resourceId"] })
                .Update("ResourcePowerStatusGridUpdate", "Resource", new { resourceId = ViewData["resourceId"] })
                .Delete("ResourcePowerStatusGridDelete", "Resource", new { resourceId = ViewData["resourceId"] }))
.Editable(editing => editing.Mode(GridEditMode.InLine))
.ClientEvents(events => events.OnDataBound("defaultGridDataBound").OnEdit("defaultGridEdit"))                
.NoRecordsTemplate("Loading...")
.Render();
}

我有一个像这样的编辑器模板：

DateTimePicker.cs

@( Html.Telerik().DateTimePicker()
          .Name("DateTimePicker")
          .Value(DateTime.Now)
  .HtmlAttributes(new { @class = "ui-widget" })
)

该属性由部分类中的自定义字段覆盖，该字段使用 UIHint 映射到我的数据结构：

ResourceStatusItem.cs

public partial class ResourceStatusItem
{
    [UIHint("DateTimePicker")]
    public DateTime? DateTimePicker { get; set; }
}

我有绑定和更新的功能：

Controller.cs

[OutputCache(Duration = 0)]
    [GridAction]
    public ActionResult ResourcePowerStatusGridBinding(int resourceId, string exportCols)
    {
        return returnResourcePowerStatusGrid(resourceId, exportCols);
    }

    [OutputCache(Duration = 0)]
    [GridAction]
    public ActionResult ResourcePowerStatusGridUpdate(int id, int resourceId)
    {
        var uow = new UnitOfWork();
        var rep = new ResourceRepository(uow);
        var listItems = rep.GetResourcePowerStatus(resourceId);
        var item = listItems.FirstOrDefault(x => x.StatusItemId == id);

        if (item != null && TryUpdateModel(item))
        {
            item.StatusItemId = id;
            item.DateTime = item.DateTimePicker != null ? item.DateTimePicker : item.DateTime;
            rep.SaveResourceStatusItem(item);
        }

        return returnResourcePowerStatusGrid(resourceId);
    }

private ActionResult returnResourcePowerStatusGrid(int resourceId, string exportCols = null)
    {
        UnitOfWork uow = new UnitOfWork();
        var rep = new ResourceRepository(uow);
        var reps = rep.GetResourcePowerStatus(resourceId);

        if (reps != null)
        {
            foreach (var m in reps)
            {
                m.ItemName = m.ItemName;
                m.DateTimePicker = m.DateTime;
                m.StatusItemId = m.StatusItemId;
            }
        }

        return View(new GridModel
        {
            Data = reps
        });
    }

查看时，日期/时间的时间和日期看起来很好。当我点击编辑时，我得到 DatePicker 和 TimePicker 图标，但文本框是空白的。取消将恢复显示的原始日期/时间值。由于我上面的条件三级运算符分配，如果用户对日期/时间字段不做任何事情，那么它会保留其先前的值。但我真的很想保留当前值并让用户从那里修改它。通过反复试验，我已验证 DatePicker 工作正常，但 DateTimePicker 和 TimePicker 都不会显示。

我找到了similar question，该人最后回答了他们自己的问题，说他们刚刚停止使用时间字段，但这不是我的选择。 Telerik 论坛似乎已经完全转移到了他们的 RadEditor，所以那里没有支持。有没有办法让现有值在编辑时始终显示在 DateTimePicker 控件中？

Answer 1

该死，我找到了an answer！

通过挂钩 OnEdit 事件并重新设置 DateTime 选择器的值，您可以使其注册正确的值。我的客户事件行现在是.ClientEvents(events => events.OnDataBound("defaultGridDataBound").OnEdit("resourcePowerStatusRowEdit"))

我将以下内容添加到我的 .js 文件中：

function resourcePowerStatusRowEdit(e) {
    if (e.dataItem.DateTimePicker)
        var sDate = new Date(e.dataItem.DateTimePicker);
    else
        var sDate = new Date();

    if (isNaN(sDate.getMonth())) {
        sDate = new Date();
    }
    //this will apply the format to the date picker that you want to show in the editing mode         
    $('#DateTimePicker').val($.telerik.formatString('{0:MM/d/yyyy hh:mm}', sDate));
    $('#DateTimePicker').focus();
}

毫无疑问，有一种更精致的方法可以做到这一点，但这解决了我的直接问题。