Fatal编程技术网
  • telerik/
  • Telerik KendoUI grid InCell编辑样式问题

Telerik KendoUI grid InCell编辑样式问题

telerik

Telerik KendoUI grid InCell编辑样式问题,telerik,telerik-grid,telerik-mvc,Telerik,Telerik Grid,Telerik Mvc,我正在使用ASP.NETMVC4和Telerik的KendoUI网格控件进行网格内编辑（GridEditMode.InCell）。我能够看到网格中的数据并编辑数据，但问题是当我单击单元格进行编辑时，我没有得到剑道UI控件（DatePicker，…）。我得到的用于编辑的控件是没有任何样式的普通控件。当我在页面上添加任何剑道控件时，我得到了正确的控件，比如DatePicker控件。所以样式和控件的js就在那里。唯一的问题是我无法在格网内控制剑道 Index.cshtml @使用Kendo.Mvc.U

我正在使用ASP.NETMVC4和Telerik的KendoUI网格控件进行网格内编辑（GridEditMode.InCell）。我能够看到网格中的数据并编辑数据，但问题是当我单击单元格进行编辑时，我没有得到剑道UI控件（DatePicker，…）。我得到的用于编辑的控件是没有任何样式的普通控件。当我在页面上添加任何剑道控件时，我得到了正确的控件，比如DatePicker控件。所以样式和控件的js就在那里。唯一的问题是我无法在格网内控制剑道

Index.cshtml

@使用Kendo.Mvc.UI
@使用KendoGrid.Models
@（Html.Kendo（）.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）；
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（真）
.ServerOperation（错误）
.Events（Events=>Events.Error（“错误处理程序”））
.Model（Model=>Model.Id（p=>p.Id））
.Read（“Read”，“Grid”）
.创建（“创建”、“网格”）
.更新（“更新”、“网格”）
.销毁（“销毁”、“网格”）
)
)
@（Html.Kendo（）.DatePicker（））
.Name（“日期选择器”）
.价值（“2011年10月10日”）
.HtmlAttributes（新的{style=“width:150px”}）
)
函数错误\u处理程序（e）{
如果（如错误）{
var message=“错误：\n”；
$。每个（例如错误、函数（键、值）{
如果（值中的“错误”）{
$.each（value.errors，函数（）{
消息+=此+“\n”；
});
}
});
警报（信息）；
}
}
_Layout.cshtml


@视图包。标题
@渲染部分（“标题内容”，false）
@RenderBody（）
这就是ingrid DatePiker控件现在的样子

这就是DatePicker的样子。

提前谢谢

真诚地，
Vlad

您很可能缺少了视图/Shared/EditorTemplates文件夹下的EditorTemplates。检查其中包含的脱机演示（因为您共享了一个屏幕截图；））

使用相同的名称将它们复制并粘贴到您的解决方案中。

您有Firebug吗？如果是这样，网络面板是否显示了任何CSS文件的404错误？@Tieson T。我在Chrome中检查过，没有错误。另外，正如我提到的，如果我使用同一个控件作为备用控件，那么它也可以，但不是在网格控件中。非常感谢！就这样。 
@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>