Kendo Grid with Angular won't display in MVC Project - angularjs

Question

This is my first time trying to use a Kendo control, and my BA is requiring it for my current project (I have been using Angular-ui-grid). I can't get the Kendo grid to show at all with test data and I am clueless as to what I am missing. The Console in Chrome says "Kendo requires JQuery to be loaded before Angular. However, the JQuery bundle is set to load first. I even put jquery-1.8.2.js before the angular.js script tag, but it still says the same thing I have the following script tags in my _Layout.cshtml page:
#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>
Here is my module:
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'])
Here is my Controller:
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)
};
});
Here is my HTML:
<script src="~/Scripts/app/Test/TestCtrl.js"></script>
<div ng-app="myModule" ng-controller="TestCtrl">
<kendo-grid k-options="gridOptions">
</kendo-grid>
</div>
Can someone please tell me what I am missing here?
Any assistance is greatly appreciated!

Answer 1

Got the grid to show up, although the headers don't line up correctly with the body. It did not like the Script tag written as:
<script src="~/Scripts/angular-kendo.js"></script>
I had to change it to:
<script src="#Url.Content("~/Scripts/angular-kendo.js")"></script>
Something's causing the header cells to not line-up correctly, but at least the grid is showing. Thanks all for trying to help!