CODEWITHSUNDEEP
javascripthtmlangularjskendo-ui
m.dorian
m.dorian

Reputation: 499

Kendo directives not working

I'm starting in the world of kendoUI and I need to create a GUI using a panelBar and a toolBar. I must be making something badly because my code doesn't work. 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>&copy; 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.

Upvotes: 3

Views: 7821

Answers (3)

Anton Swanevelder
Anton Swanevelder

Reputation: 1175

I also had this error but it is definitely the order of things.

<script src="/app/node_modules/jquery/jquery.min.js"></script>
<script src="/app/node_modules/angular/angular.min.js"></script>
<script src="/app/node_modules/kendoui/kendo.all.min.js"></script>

Upvotes: 0

DKR
DKR

Reputation: 5744

i have also this type of error 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>

Upvotes: 0

dfsq
dfsq

Reputation: 193291

You need to put Angular script tag before Kendo. Also make sure you are using 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 ngApp directive to actually kick off application. Put it on body for example:

<body ng-app="controlApp" ng-controller="controller as control">

Demo: http://plnkr.co/edit/fqcFy07VIwOsJRTcMJ9n?p=preview

Upvotes: 9

Related Questions