2

The documentation on kendo ui and requirejs seems to miss some stuff.

They tell me how to use kendo.web.min which have everything included:

http://www.kendoui.com/blogs/teamblog/posts/13-05-08/requirejs-fundamentals.aspx

(search for keyword 'shim')

but I am not interested in adding the big 2MB kendo.web.min script, I just want to shim the

kendo.grid.min but this file has a dependency to kendo.data.min which again has a dependency

to kendo.core.min.

How can I tell requirejs to load also kendo.data.min and kendo.core.min before kendo.grid.min is loaded and after jquery has been loaded. I just guess this would be the correct order.

This is what I have tried from the above telerik link:

requirejs.config({
    paths: {
        'text': '../Scripts/text',
        'durandal': '../Scripts/durandal',
        'plugins': '../Scripts/durandal/plugins',
        'transitions': '../Scripts/durandal/transitions',
        'knockout': '../Scripts/knockout-2.3.0',
        'jquery': '../Scripts/jquery-2.0.3',     
        'kendoGrid': '../Scripts//kendo.grid.min',
    },
    shim: {
        "kendoGrid": {
            deps: ["jquery"]
        }
    }
});

What is the correct way of defining the kendo dependencies like kendo.data and kendo.core ?

At the moment I am getting an exception on application startup from durandal in the systems.js saying:

"Failed to load composed module (viewmodels/DocumentBrowser). details: The property \"jQuery\" of an undefined or null reference can not be 'accessed'.

I know this error is not directly about kendo, but since I introduced kendo ui with requirejs in the DocumentBrowser module I get this exception!

UPDATE

According to CodingWhitSpike`s advise I have changed my requirejs configuration:

requirejs.config({
    paths: {
        'text': '../Scripts/text',
        'durandal': '../Scripts/durandal',
        'plugins': '../Scripts/durandal/plugins',
        'transitions': '../Scripts/durandal/transitions',
        'knockout': '../Scripts/knockout-2.3.0',
        'jquery': '../Scripts/jquery-2.0.3',
        'moment': '../Scripts/moment',
         k: "../Scripts/kendo"
    }
});

define(['durandal/app', 'plugins/dialog', 'knockout', 'services/dataservice', 'plugins/router', 'moment', 'k/kendo.grid.min'],
    function (app, dialog, ko, dataservice, router, moment, kendoGrid) {

 $("#grid").kendoGrid(...); => kendoGrid is instantiated and it works :)

});
Elisabeth
  • 20,496
  • 52
  • 200
  • 321

1 Answers1

4

This is taken from the official Kendo docs at http://docs.kendoui.com/getting-started/using-kendo-with/using-kendo-with-requirejs

<!-- first, load RequireJS -->
<script src="require.js"></script>

<!-- configure RequireJS with two logical paths:
     - "app/" will be used for your files
     - "k/" will be for Kendo UI modules -->

<script>
  requirejs.config({
      paths: {
          app: "/path/to/your/files",
          k: "http://cdn.kendostatic.com/VERSION/js"
      }
  });

  require([
      "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js",
      "app/foo",
      "app/bar",
      "k/kendo.menu.min",
      "k/kendo.grid.min"
  ], initApp);

  function initApp() {
     // main entry point of your application
  }
</script>

Assuming that kendo has set up dependencies of their modules correctly, setting up a path like k: "http://cdn.kendostatic.com/VERSION/js which points to the modules directory (NOT one individual module) and use a module in like k/kendo.grid.min should all that's required.

RainerAtSpirit
  • 3,723
  • 1
  • 17
  • 18
  • your link says I have to replace VERSION with the kendo ui version I want to use, so I guess I make this? "http://cdn.kendostatic.com/kendoui.web.2013.2.716.open-source/js" because that is the version I have downloaded. And do I need to use a cdn? if yes how do I have to define "k" correctly with my version? I anyway do not understand teleriks way of using path 'app' because I have multiple of them (see my code) each pointing to a .js file while telerik has ONE app path pointing to files not one file thats odd. – Elisabeth Sep 07 '13 at 11:12
  • You don't have to use a CDN, you can just make the path to your local files, for example: `k: /scripts/kendo`. The definition for `app` in the above example isn't really required. It is just an example. It can be left out. – CodingWithSpike Sep 07 '13 at 12:56
  • @CodingWithSpike See my update. Your advise worked as I understand now, thanks :) You should throw your comment into an answer... ;-) – Elisabeth Sep 07 '13 at 20:44