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

问题描述

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

I have a Telerik grid populated by an Ajax command similar to the following:

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

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

I have an editor template like so:

DateTimePicker.cs

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

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

The property is covered by a custom field in a partial class that maps to my data structure with a UIHint:

ResourceStatusItem.cs

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

我具有执行绑定和更新的功能：

I have functions to do the binding and updating:

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都不会显示。

When viewed, the time and date for Date/Time look just fine. When I click in to edit, I get the DatePicker and TimePicker icons, but the textbox is blank. Cancelling brings back the original date/time values for display. Because of my conditional tertiary operator assignment above, if the user does nothing with the Date/Time field, then it retains its prior value. But I would really like to keep the current value and let the user modify it from there. By trial and error, I've verified that the DatePicker works fine, but both the DateTimePicker and the TimePicker just will not display.

我发现了刚刚停止使用时间字段，但这对我来说不是一个选择。 Telerik论坛似乎已经完全转移到了RadEditor，因此那里没有任何支持。有没有办法让现有值在编辑时始终显示在DateTimePicker控件中？

I found a similar question where the person wound up answering their own question by saying that they just stopped using the time field, but that is not an option for me. The Telerik forums seem to have wholly moved over to their RadEditor, so there's no support there. Is there a way to get the existing value to consistently show up inside the DateTimePicker control on edit?

推荐答案

我该死！

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

By hooking into the OnEdit event, and re-setting the value of the DateTime picker, you can make it register the correct value. My Client Events line is now .ClientEvents(events => events.OnDataBound("defaultGridDataBound").OnEdit("resourcePowerStatusRowEdit"))

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

and I added the following to my .js file:

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

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

There is no doubt a more refined way to do this, but this solves my immediate problem.

这篇关于使用Telerik MVC网格，编辑行空白TimePicker和DateTimePicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！