Using Telerik MVC grid, editing row blanks TimePicker and DateTimePicker

问题

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

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

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.

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?

回答1:

Hot damn, I found an answer!

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

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.

来源：https://stackoverflow.com/questions/28180525/using-telerik-mvc-grid-editing-row-blanks-timepicker-and-datetimepicker

标签

.net

datetimepicker

telerik-grid

telerik-mvc