使用 Telerik MVC 网格,编辑行空白 TimePicker 和 DateTimePicker
Using Telerik MVC grid, editing row blanks TimePicker and DateTimePicker
我有一个由 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" })
)
属性 被部分 class 中的自定义字段覆盖,该部分 class 使用 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
});
}
查看时,Date/Time 的时间和日期看起来还不错。当我点击编辑时,我得到 DatePicker 和 TimePicker 图标,但文本框是空白的。取消会返回原始 date/time 值进行显示。由于我上面的条件三级运算符分配,如果用户对 Date/Time 字段不做任何操作,那么它会保留其先前的值。但我真的很想保留当前值并让用户从那里修改它。通过反复试验,我验证了 DatePicker 工作正常,但 DateTimePicker 和 TimePicker 都不会显示。
我发现一个 similar question 的人在回答他们自己的问题时说他们刚刚停止使用时间字段,但这对我来说不是一个选择。 Telerik 论坛似乎已经完全转移到他们的 RadEditor,所以那里没有支持。有没有办法让现有值在编辑时始终显示在 DateTimePicker 控件中?
真他妈的,我找到了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();
}
毫无疑问,有一种更精致的方法可以做到这一点,但这解决了我眼前的问题。
我有一个由 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" })
)
属性 被部分 class 中的自定义字段覆盖,该部分 class 使用 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
});
}
查看时,Date/Time 的时间和日期看起来还不错。当我点击编辑时,我得到 DatePicker 和 TimePicker 图标,但文本框是空白的。取消会返回原始 date/time 值进行显示。由于我上面的条件三级运算符分配,如果用户对 Date/Time 字段不做任何操作,那么它会保留其先前的值。但我真的很想保留当前值并让用户从那里修改它。通过反复试验,我验证了 DatePicker 工作正常,但 DateTimePicker 和 TimePicker 都不会显示。
我发现一个 similar question 的人在回答他们自己的问题时说他们刚刚停止使用时间字段,但这对我来说不是一个选择。 Telerik 论坛似乎已经完全转移到他们的 RadEditor,所以那里没有支持。有没有办法让现有值在编辑时始终显示在 DateTimePicker 控件中?
真他妈的,我找到了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();
}
毫无疑问,有一种更精致的方法可以做到这一点,但这解决了我眼前的问题。