Problems getting Kendo and Angular to work together

2 posts, 0 answers
  1. Jack
    Jack avatar
    1 posts
    Member since:
    Sep 2016

    Posted 16 Sep Link to this post

    Hi,

     

    I am evaluating Kendo Trial, have been trying to get the Kendo Grid with Angular example to work in our existing MVC5 project for several hours, and am having numerous angular issues. Any help would be appreciated.

    Error:

     

    angular.min.js:40 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=csa&p1=Error%3A%20%…%20c%20(http%3A%2F%2Flocalhost%3A8049%2FScripts%2Fangular.min.js%3A21%3A19)

    The view-source is: 

     

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title></title>
        <base href="/"/>
    </head>
    <body ng-app="csa">
        <link href="/Content/bootstrap.css" rel="stylesheet"/>
    <link href="/Content/site.css" rel="stylesheet"/>
     
        <script src="/Scripts/modernizr-2.6.2.js"></script>
     
        <script src="/Scripts/jquery-1.10.2.js"></script>
     
        <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
     
        <link href="/Content/kendo/kendo.common.min.css" rel="stylesheet"/>
    <link href="/Content/kendo/kendo.default.min.css" rel="stylesheet"/>
     
        <script src="/Scripts/kendo/kendo.all.min.js"></script>
    <script src="/Scripts/kendo/kendo.aspnetmvc.min.js"></script>
     
        <script src="/Scripts/angular.min.js"></script>
    <script src="/Scripts/angular-route.min.js"></script>
    <script src="/Scripts/angular-animate.min.js"></script>
     
        <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>
    <script src="/Scripts/ui-bootstrap-tpls-2.0.0.min.js"></script>
     
        <script src="/Scripts/Modules/utility.js"></script>
    <script src="/Scripts/Modules/format.js"></script>
    <script src="/Scripts/Modules/customer.js"></script>
    <script src="/Scripts/Modules/api.js"></script>
    <script src="/Scripts/Modules/url.js"></script>
     
         
         
     
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <p class="nav navbar-text navbar-right">Welcome</p>
            </div>
        </div>
            <ol class="breadcrumb">
                <li ng-repeat="b in breadcrumbs"><a href="{{b.href}}">{{b.text}}</a></li>
                <li class="active">{{title}}</li>
            </ol>
            <h1 class="page-header"></h1>
        <div class="container body-content">
             
    <h1>Application Name</h1>
     
    <p>Hello, User</p>
     
    <div id="example">
        <div ng-controller="MyCtrl">
            <kendo-grid options="mainGridOptions">
                <div k-detail-template>
                    <kendo-tabstrip>
                        <ul>
                            <li class="k-state-active">Orders</li>
                            <li>Contact information</li>
                        </ul>
                        <div>
                            <div kendo-grid k-options="detailGridOptions(dataItem)"></div>
                        </div>
                        <div>
                            <ul class="contact-info-form">
                                <li><label>Country:</label> <input class="k-textbox" k-ng-model="dataItem.Country" /></li>
                                <li><label>City:</label> <input class="k-textbox" k-ng-model="dataItem.City" /></li>
                                <li><label>Address:</label> {{dataItem.Address}}</li>
                                <li><label>Home phone:</label> {{dataItem.HomePhone}}</li>
                            </ul>
                        </div>
                    </kendo-tabstrip>
                </div>
            </kendo-grid>
     
     
        </div>
    </div>
     
    <style>
        .contact-info-form {
            list-style-type: none;
            margin: 30px 0;
            padding: 0;
        }
     
            .contact-info-form li {
                margin: 10px 0;
            }
     
            .contact-info-form label {
                display: inline-block;
                width: 100px;
                text-align: right;
                font-weight: bold;
            }
    </style>
     
    <script>
        angular.module("csa", [ "kendo.directives" ])
            .controller("MyCtrl", function($scope){
                $scope.mainGridOptions = {
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                        },
                        pageSize: 5,
                        serverPaging: true,
                        serverSorting: true
                    },
                    sortable: true,
                    pageable: true,
                    dataBound: function() {
                        this.expandRow(this.tbody.find("tr.k-master-row").first());
                    },
                    columns: [{
                        field: "FirstName",
                        title: "First Name",
                        width: "120px"
                        },{
                        field: "LastName",
                        title: "Last Name",
                        width: "120px"
                        },{
                        field: "Country",
                        width: "120px"
                        },{
                        field: "City",
                        width: "120px"
                        },{
                        field: "Title"
                    }]
                };
     
                $scope.detailGridOptions = function(dataItem) {
                    return {
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            },
                            serverPaging: true,
                            serverSorting: true,
                            serverFiltering: true,
                            pageSize: 5,
                            filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
                        },
                        scrollable: false,
                        sortable: true,
                        pageable: true,
                        columns: [
                        { field: "OrderID", title:"ID", width: "56px" },
                        { field: "ShipCountry", title:"Ship Country", width: "110px" },
                        { field: "ShipAddress", title:"Ship Address" },
                        { field: "ShipName", title: "Ship Name", width: "190px" }
                        ]
                    };
                };
            })
    </script>
     
     
        </div>
        <confirmation></confirmation>
     
     
    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
        {"appName":"Chrome","requestId":"5a785f2f4ca84648a191e906730accc8"}
    </script>
    <script type="text/javascript" src="http://localhost:8231/24fa4a588ff7430e816ca7a8f0925868/browserLink" async="async"></script>
    <!-- End Browser Link -->
     
    </body>
    </html>


  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 19 Sep Link to this post

    Hi,

    Note that the Angular files should be loaded before Kendo UI. Here is a working setup:

    http://dojo.telerik.com/iqEGi

    Regards,
    Kiril Nikolov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top