Loading kendo widget in a portlet using requireJS

[Russell]

I am struggling to get Kendo UI to play nicely in a portlet environment, where multiple portlets can load competing scripts and clobber each other. I am trying to use the 'context' feature of RequireJS to isolate the code for each portlet and I am running into trouble.

In my portlet, I have an inline script that invokes require after the portlet is loaded on the page:

var myRequire = require.config({
            context: 'my/app',
            paths: {
                jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min',
                kendo: 'http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min',
                chatterApp: contextPath + '/js'
            }
        });

        myRequire ([
            'jquery',
            'myApp/main'
        ], function initApp($, app) {
            var appId= '#<portlet:namespace/>App';

            app.create({ ... });
        });

In my app code, I have a structure like this:
define('myApp/main', ['jquery', 'kendo'], function($, kendo) {
    ui.plugin(kendo.ui.Widget.extend({
       ... //widget code
    });
    
    return {
        create: function create(id, options) {
            $(id).kendoChatterLens(options);
        }
    };
});

This *works* if I only have one portlet on the page. As soon as I add a second portlet with a different context, it breaks down. The 'kendoChatterLens' property on $ is undefined.

I have tried creating a requireJS shim for Kendo in the config to make it use the correct jQuery version:
           shim: {
                "kendo": {
                    export:"kendo" ,
                    deps: ['jquery']
                }
            }
This doesn't seem to have any effect.

Note that because of the way the portlet loads JS files, I can't set a 'data-main' attribute on the requireJS script. In any case it's not clear to me whether requireJS allows multiple 'data-main' attributes.

How can I fix this issue?

[Mihai]

Hi,

This is unsupported at this time.

Kendo uses the global jQuery object.  Also, `kendo` is a global variable (exported as window.kendo) -- this makes it impossible to use multiple versions of jQuery / Kendo UI in the same page.

Regards,
Mihai
Telerik