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

KendoUI grid InCell editing style issue

1 Answer 176 Views

Grid

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

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.

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>

</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.

KendoUI grid InCell editing style issue

1 Answer, 1 is accepted