Kendo Grid inline editing with Kendo DataPicker

Question

I am using Kendo grid with three columns Name, Date i have Edit button in one of the column,now f i click "edit" button then the respective row should be in Edit mode with KendoDataPicker inside grid in "Date" field. How to acheive this?

@(Html.Kendo().Grid<MyModel.ResultM>()
                                   .Name("ResultsGrid")
                                   .Sortable()
                                   .Events(grid => grid.DataBound("fnShowNoRecordsFoundMsg"))
                                   .AutoBind(true)
                                   .Scrollable(scr => scr.Height("auto"))
                                   .Sortable(sortable => sortable.AllowUnsort(false))
                                   .Columns(columns =>
                                   {
                                       columns.Bound(p => p.Name).Title("Name").Width(27);
                                       columns.Bound(p => p.Date).Title("Date").Width(27).EditorTemplateName((
                                       @Html.Kendo().DatePicker()
                                 .Name("FDPicker")
                                            //.Value()
                                            .HtmlAttributes(new { data_bind = "value:Date" })
                                       .Format("{0:MM/dd/yy}")

                                .ToClientTemplate()).ToHtmlString());
                                       columns.Command(command => { command.Destroy(); command.Edit(); }).Width(24);
                                   })
                                       .Editable(editable => editable.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))
                                        .DataSource(Resultdatasource=> Resultdatasource
                                        .Ajax()
                                        .Sort(sort => sort.Add("Date").Descending())
                                        .Model(model => model.Id(p => p.Name))
                                        .ServerOperation(false)
                                        .Read(read => read.Action("Results_Read", "Home").Data("fnGetParamsObject"))
                                        .Update(update => update.Action("EditingInline_Update", "Home"))
                                        .Destroy(update => update.Action("EditingInline_Destroy", "Home"))
                                                )
)

edit and delete functionality works with this code. but i did not get Kendo Picker after i click edit in the grid. — 7783

Steve Greene Steve Greene · Accepted Answer · 2015-10-11T15:07:36

Inline editing relies on EditorTemplates. Try something like this:

columns.Bound(p => p.Date)
        .Format("{0:MM/dd/yyyy}")
        .Width(190)
        .EditorTemplateName("DateTime");

You may also need to copy the editor templates from your computer to your ~\Views\Shared\EditTemplates folder.

For me they were here:
C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q2 2015\wrappers\aspnetmvc\EditorTemplates\razor

Kendo Grid inline editing with Kendo DataPicker

1 Answers