Hi All,
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
_Layout.cshtml
I also posted the same question on Stack Overflow KendoUI grid InCell editing style issue with images, so you can see what I am talking about.
Thanks in advance.
Sincerely,
Vlad.
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><!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>I also posted the same question on Stack Overflow KendoUI grid InCell editing style issue with images, so you can see what I am talking about.
Thanks in advance.
Sincerely,
Vlad.
1 Answer, 1 is accepted
0
Vlad
Top achievements
Rank 1
Rank 1
answered on 11 Nov 2012, 04:37 PM
For people who get to the same problem. The asnser is you need to copy EditorTemplates from Views/Shared/EditorTemplates folder when you download Kendo UI demo.