Kendo UI MVC Grid date editor template not displaying value from grid

Question

I have the following view.

@using BecomingAKendoUISamurai.ViewModels

<h2>Step 21 MVC Grid CRUD</h2>

<br/>

@(Html.Kendo().Grid<SamuraiViewModel>()
    .Name("SamuraiGrid")
    .Columns(columns =>
    {
      columns.Bound(m => m.Id).Hidden();
      columns.Bound(m => m.FirstName);
      columns.Bound(m => m.LastName);
      columns.Bound(m => m.RankId).ClientTemplate("#=Rank#");
      columns.Bound(m => m.DateOfBirth).Width(125);
      columns.Bound(m => m.DateOfDeath).Width(125);
      columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
  })
  .DataSource(source => source
    .Ajax()
    .Sort(s => s.Add(p => p.LastName).Ascending())
    .PageSize(5)
    .Model(model =>
    {
        model.Id(m => m.Id);
    })
    .Create(create => create.Action(MVC.Home.ActionNames.CreateSamuraiMvc, MVC.Home.Name))
    .Read(read => read.Action(MVC.Home.ActionNames.ReadSamuraiMvc, MVC.Home.Name))
    .Update(update => update.Action(MVC.Home.ActionNames.UpdateSamuraiMvc, MVC.Home.Name))
    .Destroy(destroy => destroy.Action(MVC.Home.ActionNames.DestroySamuraiMvc, MVC.Home.Name))

)
.Editable(editable => editable.Mode(GridEditMode.InLine)) //PopUp and InCell 
.Sortable()
.Pageable(p => p.PageSizes(new int[]{2,4,6}))
.Filterable()
.ToolBar(toolbar => toolbar.Create())
  )

Using the following View Model

namespace BecomingAKendoUISamurai.ViewModels
{
  public class SamuraiViewModel : IMappableViewModel<SamuraiViewModel, Samurai>
  {
    #region Properties
    public int Id { get; set; }
    [Required]
    [DisplayName("First Name")]
    public string FirstName { get; set; }

    [Required]
    [DisplayName("Last Name")]
    public string LastName { get; set; }

    [Required]
    [DisplayName("Rank")]
    [UIHint("Rank")]
    public int RankId { get; set; }
    public string Rank { get; set; }
    public List<SelectListItem> Ranks { get; set; }

    [DisplayName("Date of Birth")]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
    [UIHint("DateOfBirthDate")]
    public DateTime DateOfBirth { get; set; }

    [DisplayName("Date of Death")]
    [DisplayFormat(DataFormatString = "{0:MMMM dd yyyy}")]
    [UIHint("DateOfDeathDate")]
    public DateTime DateOfDeath { get; set; }
    #endregion

    #region Constructors
    public SamuraiViewModel()
    {
        Ranks = new List<SelectListItem>();
    }

    public SamuraiViewModel(Samurai samurai)
    {
        FromEntity(samurai);
    }
    #endregion

    #region IMappableViewModel

    public void FromEntity(Samurai entity)
    {
        Mapper.CreateMap<Samurai, SamuraiViewModel>()
            .ForMember(vm => vm.RankId, m => m.MapFrom(e => e.Rank))
            .ForMember(vm => vm.Rank, m => m.MapFrom(e => e.Rank.ToString()));

        Mapper.Map(entity, this);
    }

    public Samurai ToEntity()
    {
        var entity = new Samurai();
        Mapper.CreateMap<SamuraiViewModel, Samurai>()
            .ForMember(e => e.Rank, src => src.MapFrom(vm => vm.RankId));

        Mapper.Map(this, entity);
        return entity;
    }
    #endregion

    public string JsonRanks
    {
        get { return Ranks.ConvertToJson(); }
    }
  }
}

Using the following editor template

@model DateTime?

@(Html.Kendo().DatePicker()
            .Name("DateOfBirth")
            .Format("MM/dd/yyyy")
            .Value(Model == null ? DateTime.Now : @Model)
)

Calling the controller's read method

public virtual JsonResult ReadSamuraiMvc([DataSourceRequest] DataSourceRequest request)
{
  return Json(GetSamuraiViewModels().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
private List<SamuraiViewModel> GetSamuraiViewModels()
{
  var viewModel = new List<SamuraiViewModel>();

  var samurais = samuraiService.ReadSamurai().ToList();
  if (samurais.Any())
  {
    samurais.ForEach(s => viewModel.Add(new SamuraiViewModel(s)));
  }
  return viewModel;
}

I can see all the data in the grid. For example row 1 has: "Hatori" "Hanzo" "Grand Master" "03/15/1541" "April 16 1563" Edit Delete

When I click the Edit button, first name, last name and Rank all have the values defined in the row, but Date of Birth and Date of Death are both empty.

How do I fix this?

I have tried using inline and popup mode and get the same results. Thanks in advance.

Have you tried taking the ui hint off the date of birth property and tried to use the default date time picker that is supplied with the mvc wrappers. Alternatively try using kendo().datepickerfor(model) this will bind the value for you. Also why not check to see if model.hasvalue if using a nullable datetime — David Shorthose
When I remove the UIHint from the model, I get the default dateTime picker editor, but it is also empty. — Brian Holland

Atanas Korchev Atanas Korchev · Accepted Answer · 2014-06-11T08:35:09

Try using DatePickerFor:

@model DateTime?
@(Html.Kendo().DatePickerFor(m => m)
      .Format("MM/dd/yyyy")
)

Kendo UI MVC Grid date editor template not displaying value from grid

1 Answers