[Solved] Grid not displaying Datepicker

[Rafael]

All,

I have a simple example of a grid with a DateTime property, however when the grid is being displayed and the user tries to edit the record, the DatePicker is not being displayed. It might be missing something really simple, so a second pair of eyes could be really helpful. Thanks in advance.

Let's get to the code:

1. Created a brand new MVC 3 Website;
2. Added a reference to Telerik MVC Extensions (version 2011.3.1115) using NuGet;
3. Created 1 model class to illustrate my sample: 

public class Address
{
    public int Key { get; set; }
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    [DataType(DataType.Date)]
    public DateTime DateMovedIn { get; set; }
}

HomeController.cs 

public ActionResult Index()

{

    IList<Address> inputModel = new List<Address>();

    inputModel.Add(new Address() { Key = 1, Address1 = "123 Main St", Address2 = "City, ST 00000", DateMovedIn = DateTime.Now });

    inputModel.Add(new Address() { Key = 2, Address1 = "456 Last St", Address2 = "City, ST 00000", DateMovedIn = DateTime.Now });

    return View(inputModel);

}

And the Index.cshtml view:

@using Telerik.Web.Mvc.UI;
@using TelerikGridSample.Models;

@model List<Address>

@{
    ViewBag.Title = "Home Page";
}
    <div style="width:600px;">
        @(Html.Telerik().Grid(Model)
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Bound(o => o.Key).Visible(false);
                columns.Bound(o => o.Address1).Width(150);
                columns.Bound(o => o.Address2).Width(150);
                columns.Bound(o => o.DateMovedIn).Width(100).Title("Move-in Date");
                columns.Command(commands =>
                {
                    commands.Edit().ButtonType(GridButtonType.Image);
                    commands.Delete().ButtonType(GridButtonType.Image);
                }).Width(100).Title("Edit  |  Delete");
            })
                            .DataBinding(dataBinding => dataBinding.Ajax()
                                .Select("_Select", "Home")
                                .Update("_Save", "Home")
                                .Delete("_Delete", "Home"))
                            .DataKeys(keys => keys.Add(a => a.Key))
                            .Editable(editing => editing.Enabled(true))
                        )
    </div>

If I run the application, I would expect to see a DatePicker when I tried to edit the record, but it doesn't display (screenshot_1.png).

I read on a different post that I needed to add a Date.cshtml class to the Shared View folder with the following content:

@using Telerik.Web.Mvc.UI;

@model DateTime?
@(Html.Telerik().DatePickerFor(m => m)
      .HtmlAttributes(new { id = ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty) + "_wrapper" })
)

I added but it didn't help.

Any help would be appreciated.

Thanks again in advance,
Rafael

[Rafael]

I was able to figure this one out.

The Date.cshtml file must be placed inside of a folder called "EditorTemplates" (I placed mine inside "Views>Shared").

I also modified my model to match the Date.cshtml's model, and made the DateTime property nullable.

public class Address
{
    public int Key { get; set; }
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    [DataType(DataType.Date)]
    public DateTime? DateMovedIn { get; set; }
}

Thanks,
Rafael