Inject kendo ui with requirejs

Question

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 :)

});

Answer 1

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.