Geek asks and answers

Using Telerik MVC Grid, Editing TimePicker and DateTimePicker String Spaces

I have a Telerik grid populated with 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, for example:

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 my data structure to UIHint:

ResourceStatusItem.cs

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

I have functions for linking 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 .

, , , , , , Telerik RadEditor, . DateTimePicker ?

0
1

, !

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

, , .

0

More articles:


All Articles