Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Problems getting Kendo and Angular to work together

1 Answer 280 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jack
Top achievements
Rank 1
Jack asked on 16 Sep 2016, 03:22 PM

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>


1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 19 Sep 2016, 07:40 AM
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.
 
Tags
Grid
Asked by
Jack
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or