Question

这是我第一次尝试使用Kendo控件，我的BA要求它用于我当前的项目（我一直在使用Angular-ui-grid）。我无法通过测试数据显示Kendo网格，而且我对于我所缺少的内容毫无头绪。 Chrome中的控制台说＆＃34; Kendo需要在Angular之前加载JQuery。但是，JQuery包被设置为首先加载。我甚至将jquery-1.8.2.js放在angular.js脚本标记之前，但它仍然说我在_Layout.cshtml页面中有以下脚本标记：

@Styles.Render("~/CSS/bootstrap")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-1.8.2.js"></script>

    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/app/app.js"></script>
    <script src="~/Scripts/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="~/Scripts/dirPagination.js"></script>
    <script src="~/Scripts/app/checklist-model.js"></script>
    <script src="~/Scripts/angular-sanitize.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Scripts/angular-touch.js"></script>
    <script src="~/Scripts/angular-animate.js"></script>
    <script src="~/Scripts/pdfmake/pdfmake.min.js"></script>
    <script src="~/Scripts/pdfmake/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <link href="~/Content/ui-grid.css" rel="stylesheet" />
    <script src="~/Scripts/ui-grid.js"></script>
    <script src="~/Scripts/draggable-rows.js"></script>
    <script src="~/Scripts/app/Home/OperatorHomeCtrl.js"></script>
    <script src="~/Scripts/app/Home/operatorHomeService.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!--This bundle was moved by the Telerik VS Extensions for compatibility reasons-->


   <script src="@Url.Content("~/Scripts/kendo/2015.1.429/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2015.1.429/jszip.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2015.1.429/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2015.1.429/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
    <script src="~/Scripts/angular-kendo.js"></script>

这是我的模块：

var app = angular.module('myModule', ['ui.bootstrap', 'checklist-model', 'kendo.directives','ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.autoResize', 'ui.grid.draggable-rows'])

这是我的控制器：

angular.module('myModule').controller("TestCtrl", function ($compile, $scope, $log) {

    $scope.gridOptions = {
        pageable: false,
        batch: false,
        reorderable: true,
        sortable: true,
        editable: "inline",
        dataSource: new kendo.data.DataSource({
            data: [
              { id: 1, name: "x" },
              { id: 2, name: "y" }
            ],
            schema: {
                model: {
                    id: "id",
                    fields: {
                        'Name': { type: "string", editable: true },
                    }
                }
            }
        }),
        columns: [
          { field: "name" },
          { template: '<button class=\'k-button\' ng-click=\'test("custom1")\'><i class="icon-edit"></i>custom1</button>' },
          {
              command: [
                { name: "edit", text: " " },
                { name: "destroy", text: " " },
                { template: '<button class=\'k-button\' ng-click=\'test("custom2")\'><i class="icon-edit"></i>custom2</button>' }
              ]
          }
        ]
    };


    $scope.test = function (m) {
        alert(m)
    };

});

这是我的HTML：

<script src="~/Scripts/app/Test/TestCtrl.js"></script>

<div ng-app="myModule" ng-controller="TestCtrl">
    <kendo-grid k-options="gridOptions">

    </kendo-grid>
</div>

有人可以告诉我这里缺少什么吗？

非常感谢任何帮助！

Answer 1

显示网格，尽管标题与正文无法正确排列。它不喜欢脚本标签写成：

 <script src="@Url.Content("~/Scripts/angular-kendo.js")"></script>

我不得不将其更改为：

          user_setting
----+---------+--------------+---------------
 id | user_id | setting_name | setting_value
----+---------+--------------+---------------
  1 |    1    |     color    |     000000
  2 |    1    |     date     |     aammjj
  3 |    2    |     color    |     000000
  4 |    2    |     date     |     aammjj
  5 |    3    |     color    |     000000
  6 |    3    |     date     |     aammjj

某些因素导致标题单元格无法正确排列，但至少网格正在显示。感谢所有人的帮助！

带有Angular的Kendo Grid不会在MVC项目中显示

1 个答案: