I am using ASP.NET MVC 4 and Telerik’s KendoUI grid control with in grid editing (GridEditMode.InCell). I am able to see data in the grid and edit data, but the problem is that when I click cell for editing I am not getting Kendo UI controls (DatePicker, …). Controls that I am getting for editing are plain without any styles. When I add any Kendo control on the page I am getting right control, such as DatePicker control. So style and controls’ js are there. The only problem is I am not getting Kendo control inside of the grid.
Index.cshtml
@using Kendo.Mvc.UI
@using KendoGrid.Models
@(Html.Kendo().Grid<Person>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.FirstName).Width(140);
columns.Bound(p => p.LastName).Width(140);
columns.Bound(p => p.DayOfBirth).Width(200);
columns.Bound(p => p.Age).Width(150);
columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Read("Read", "Grid")
.Create("Create", "Grid")
.Update("Update", "Grid")
.Destroy("Destroy", "Grid")
)
)
<div style="margin-top: 20px">
@(Html.Kendo().DatePicker()
.Name("datepicker")
.Value("10/10/2011")
.HtmlAttributes(new { style = "width:150px" })
)
</div>
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
</script>
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/examples-offline.min.css")">
<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/console.min.js")"></script>
<script src="@Url.Content("~/Scripts/prettify.min.js")"></script>
@RenderSection("HeadContent", false)
</head>
<body>
<div class="page">
<div id="example" class="k-content">
@RenderBody()
</div>
</div>
</body>
</html>
That is how ingrid DatePiker control looks like right now
That is how DatePicker should look like.
Thanks in advance.
Sincerely,
Vlad
Most probably you are missing the EditorTemplates under the Views/Shared/EditorTemplates folder. Check the offline demos they contain it (since you shared a screenshot ;)).
Copy and paste them using the same names into your solution.