This is a migrated thread and some comments may be shown as answers.

KendoUI grid InCell editing style issue

1 Answer 126 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Vlad asked on 11 Nov 2012, 03:54 AM
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.


@using Kendo.Mvc.UI
@using KendoGrid.Models
    .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 =>
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .DataSource(dataSource => dataSource       
        .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">
              .HtmlAttributes(new { style = "width:150px" })
<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";

<!DOCTYPE html>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <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)
    <div class="page">
        <div id="example" class="k-content">

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.


1 Answer, 1 is accepted

Sort by
Top achievements
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.
Asked by
Top achievements
Rank 1
Answers by
Top achievements
Rank 1
Share this question