Kendo UI MVC网格日期编辑器模板不显示网格值

时间:2014-06-10 17:40:23

标签: kendo-ui kendo-grid kendo-asp.net-mvc

我有以下观点。

@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())
  )

使用以下视图模型

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

使用以下编辑器模板

@model DateTime?

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

调用控制器的读取方法

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

我可以看到网格中的所有数据。例如,第1行有: “Hatori”“Hanzo”“大师”“03/15/1541”“1563年4月16日”编辑删除

单击“编辑”按钮时,名字,姓氏和等级都具有行中定义的值,但出生日期和死亡日期均为空。

我该如何解决这个问题?

我尝试使用内联和弹出模式并获得相同的结果。 提前致谢。

1 个答案:

答案 0 :(得分:2)

尝试使用DatePickerFor:

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