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 2016 Link to this post



    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.



    angular.min.js:40 Uncaught Error: [$injector:modulerr]$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>
        <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" />
        <base href="/"/>
    <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>
            <ol class="breadcrumb">
                <li ng-repeat="b in breadcrumbs"><a href="{{b.href}}">{{b.text}}</a></li>
                <li class="active">{{title}}</li>
            <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>
                            <li class="k-state-active">Orders</li>
                            <li>Contact information</li>
                            <div kendo-grid k-options="detailGridOptions(dataItem)"></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>
        .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;
        angular.module("csa", [ "kendo.directives" ])
            .controller("MyCtrl", function($scope){
                $scope.mainGridOptions = {
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "//"
                        pageSize: 5,
                        serverPaging: true,
                        serverSorting: true
                    sortable: true,
                    pageable: true,
                    dataBound: function() {
                    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: "//"
                            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" }
    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
    <script type="text/javascript" src="http://localhost:8231/24fa4a588ff7430e816ca7a8f0925868/browserLink" async="async"></script>
    <!-- End Browser Link -->

  2. Kiril Nikolov
    Kiril Nikolov avatar
    2596 posts

    Posted 19 Sep 2016 Link to this post


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

    Kiril Nikolov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top