0

ASP.NET MVC 4とTelerikのKendoUIグリッドコントロールをグリッド編集（GridEditMode.InCell）で使用しています。グリッド内のデータを表示してデータを編集することはできますが、問題は、セルをクリックして編集すると、Kendo UIコントロール（DatePickerなど）が表示されないことです。私が編集のために取得しているコントロールは、スタイルがなくてもプレーンです。ページにKendoコントロールを追加すると、DatePickerコントロールなどの正しいコントロールが得られます。したがって、スタイルとコントロールのjsがあります。唯一の問題は、グリッド内で剣道のコントロールが得られないことです。

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>

これが、現在のingridDatePikerコントロールの外観です。 それが今の様子です

これがDatePickerの外観です。 それはそれがどのように見えるべきかです

前もって感謝します。

よろしくお願いいたします。Vlad

4

1 に答える 1

1

おそらく、Views / Shared/EditorTemplatesフォルダーの下にEditorTemplatesがありません。それらに含まれているオフラインデモを確認してください（スクリーンショットを共有しているため;））。

同じ名前を使用してそれらをコピーしてソリューションに貼り付けます。

于 2012-11-11T07:38:31.780 に答える