This is a migrated thread and some comments may be shown as answers.

Problems getting Kendo and Angular to work together

1 Answer 324 Views

Grid

This is a migrated thread and some comments may be shown as answers.

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>

<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>

<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>

<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>

</body>

</html>

Problems getting Kendo and Angular to work together

1 Answer, 1 is accepted