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();
}

毫无疑问，这是一种更精确的方法，但这解决了我当前的问题。

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

1 个答案: