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
