Kendo directives don't work
I am starting out in the kendoUI world and I need to create a GUI using a panel bar and toolbar. I must be doing something bad because my code is not working. Here's the code:
View in HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap- theme.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css">
</head>
<body ng-controller="controller as control">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
</div>
<div id="navbar" class="navbar-collapse collapse">
<div kendo-toolbar k-options="control.toolbarOptions"></div>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4">
<ul kendo-panel-bar k-options="panelBarOptions">
<li>
Metallica - Master of Puppets 1986
<ul>
<li>Battery</li>
<li>Master of Puppets</li>
<li>The Thing That Should Not Be</li>
<li>Welcome Home (Sanitarium)</li>
<li>Disposable Heroes</li>
<li>Leper Messiah</li>
<li>Orion (Instrumental)</li>
<li>Damage, Inc.</li>
</ul>
</li>
<li>
Iron Maiden - Brave New World 2000
<ul>
<li>The Wicker Man</li>
<li>Ghost Of The Navigator</li>
<li>Brave New World</li>
<li>Blood Brothers</li>
<li>The Mercenary</li>
<li>Dream Of Mirrors</li>
<li>The Fallen Angel</li>
<li>The Nomad</li>
<li>Out Of The Silent Planet</li>
<li>The Thin Line Between Love And Hate</li>
</ul>
</li>
</ul>
</div>
</div>
<hr>
<footer>
<p>© Company 2014</p>
</footer>
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="controller.js"></script>
</body>
</html>
Controller in JS:
(function () {
var controller = function () {
var scope = this;
scope.toolbarOptions = {
items: [
{ type: "button", text: "Button" },
{ type: "button", text: "Toggle Button", togglable: true },
{
type: "splitButton",
text: "Insert",
menuButtons: [
{ text: "Insert above", icon: "insert-n" },
{ text: "Insert between", icon: "insert-m" },
{ text: "Insert below", icon: "insert-s" }
]
},
{ type: "separator" },
{ template: "<label>Format:</label>" },
{
template: "<input kendo-drop-down-list k-options='formatOptions' style='width: 150px;' />",
overflow: "never"
},
{ type: "separator" },
{
type: "buttonGroup",
buttons: [
{ spriteCssClass: "k-tool-icon k-justifyLeft", text: "Left", togglable: true, group: "text-align" },
{ spriteCssClass: "k-tool-icon k-justifyCenter", text: "Center", togglable: true, group: "text-align" },
{ spriteCssClass: "k-tool-icon k-justifyRight", text: "Right", togglable: true, group: "text-align" }
]
},
{
type: "buttonGroup",
buttons: [
{ spriteCssClass: "k-tool-icon k-bold", text: "Bold", togglable: true, showText: "overflow" },
{ spriteCssClass: "k-tool-icon k-italic", text: "Italic", togglable: true, showText: "overflow" },
{ spriteCssClass: "k-tool-icon k-underline", text: "Underline", togglable: true, showText: "overflow" }
]
},
{
type: "button",
text: "Action",
overflow: "always"
},
{
type: "button",
text: "Another Action",
overflow: "always"
},
{
type: "button",
text: "Something else here",
overflow: "always"
}
]
};
scope.formatOptions = {
optionLabel: "Paragraph",
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Heading 1", value: 1 },
{ text: "Heading 2", value: 2 },
{ text: "Heading 3", value: 3 },
{ text: "Title", value: 4 },
{ text: "Subtitle", value: 5 },
]
};
scope.panelBarOptions = {
};
}
//angular.module('controlCajaApp').controller('ControlCajaCtrl', controlCajaCtrl);
controlApp.controller('controller', controller);
}());
Moduler:
var controlApp = angular.module('controlApp', ['kendo.directives']);
Thanks in advance.
+3
source to share
3 answers
You need to put the Angular
script tag before Kendo. Also make sure you are using the Kendo version that includes Angular directive bindings.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
And one more thing: you forgot to put the directive ngApp
in order to actually start the application. Place it on body
for example:
<body ng-app="controlApp" ng-controller="controller as control">
Demo: http://plnkr.co/edit/fqcFy07VIwOsJRTcMJ9n?p=preview
+8
source to share
I also have this type of errors I solved by putting these js and css
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="//cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//cdn.kendostatic.com/2014.2.716/styles/kendo.flat.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="//cdn.kendostatic.com/2014.2.716/js/kendo.angular.min.js"></script>
0
source to share