Problem calling kendo.culture when using requirejs

[Alberto]

I have no problem using Kendoui with requirejs except when I try to localize the dates using kendo.culture().  For another project without requirejs I have no issues.

My settings are

require.config({

  paths: {

      jquery: 'lib/jquery-1.7.2.min',

      kendo: 'lib/kendo.web.min',

      kendoCulture: 'lib/cultures/kendo.culture.es-MX.min',

      knockout: 'lib/knockout-2.1.0',

      knockout_kendo: 'lib/knockout-kendo.min',

      underscore: 'lib/underscore-min',

      json2: 'lib/json2',

  }

});

 

require([

    'jquery',

    'kendo',

    'kendoCulture',

    'knockout',

    'knockout_kendo',

    'underscore',

    'json2'

    ], function (

        $,

        kendo,

        kendoCulture,

        ko,

        knockout_kendo,

        _,

        json2) {

 

        // Start of Main Function

        $(function () {

 

 

            kendo.culture("es-MX");

 

              $("#tabstrip").kendoTabStrip({

                        animation:{

                            open:{

                                effects:"fadeIn"

                            }

                        }

 

                    });

 

            // knockout Bindings

   

        });

});

The error message that I get is that kendo is undefined when the kendo.culture("es-MX") command is called.

Thanks,

Alberto

[Alberto]

I managed to fix the runtime error. Now the kendo object is available and I can call kendo.culture. The problem is that after calling kendo.culture("es-MX") the value remains "en-US". That is calling culture is not doing anything.

The error I had was using kendo and kendo.as AMD modules, when they are regular scripts. By defining them in the shim section this is solved. The remaining problem is that I have to define the dependencies of each script and the objects that should be exported. I am guessing 'kendo' for kendo, but I do not know if it exports more global variables or if kendo.cultures should also export some objects.

Any ideas on how to discover the exports and dependencies of this scripts?

Thanks,

require.config({

  paths: {

      jquery: 'lib/jquery-1.7.2.min',

      signals: 'lib/signals',

      hasher: 'lib/hasher',

      crossroads: 'lib/crossroads',

      kendo: 'lib/kendo.web.min',

      kendoCulture: 'lib/cultures/kendo.culture.es-MX.min',

      knockout: 'lib/knockout-2.1.0',

      knockout_kendo: 'lib/knockout-kendo.min',

      underscore: 'lib/underscore-min',

      json2: 'lib/json2',

      faclptController: 'faclpt/faclptController',

      FacturaViewModel: 'faclpt/FacturaViewModel',

      ConfigViewModel: 'faclpt/ConfigViewModel',

      domReady: 'lib/domReady'

  },

  shim: {

      'kendoCulture': {

          deps: ['kendo']

      },

      'kendo' : {

          exports: 'kendo'

      }

  }

 

});

 

require([

    'require',

    'jquery',

    'knockout',

    'knockout_kendo',

    'underscore',

    'json2',

    'faclptController',

    'FacturaViewModel',

    'ConfigViewModel',

    'domReady'

    ], function (

        require,

        $,

        ko,

        knockout_kendo,

        _,

        json2,

        faclptController,

        FacturaViewModel,

        ConfigViewModel,

        domReady) {

 

            // Start of Main Function

            domReady(function () {

 

            kendo.culture("es-MX");

            console.log("***** kendo culture object remains unchanged *****");

 

 

                $("#tabstrip").kendoTabStrip({

                            animation:{

                                open:{

                                    effects:"fadeIn"

                                }

                            }

 

                        });

 

 

 

                // knockout Bindings

                ko.applyBindings(FacturaViewModel, document.getElementById('Proceso'));

 

                ko.applyBindings(ConfigViewModel, document.getElementById('Configuracion'));

 

            });

 

 

});

[Alberto]

It works !! As longg as  I inline the content of kendo.culture.es-MX.min.js in the main section of the require function. Quite an ugly hack. The reason I understand is that kendo.culture.es-MX.min.js does not export any function or object (is not a module) so the function inside of the file has to be inlined on the same scope as kendo.
Of couse, I do not want to rely in such a horrible hack, so the question is how can one inline a script with require. On my cod below I manage to import kendo.culture.es-MX.min.js (I can see that Chrome downloads the script), but it is not being inlined.

require.config({

  paths: {

      jquery: 'lib/jquery-1.7.2.min',

      signals: 'lib/signals',

      hasher: 'lib/hasher',

      crossroads: 'lib/crossroads',

      kendo: 'lib/kendo.web.min',

      kendoCulture: 'lib/cultures/kendo.culture.es-MX.min',

      knockout: 'lib/knockout-2.1.0',

      knockout_kendo: 'lib/knockout-kendo.min',

      underscore: 'lib/underscore-min',

      json2: 'lib/json2',

      faclptController: 'faclpt/faclptController',

      FacturaViewModel: 'faclpt/FacturaViewModel',

      ConfigViewModel: 'faclpt/ConfigViewModel',

      domReady: 'lib/domReady'

  },

    shim: {

        'kendoCulture': {

            deps: ['kendo']

        },

        'kendo' : {

            exports: 'kendo'

        }

    }

 

});

 

require([

    'require',

    'jquery',

    'knockout',

    'knockout_kendo',

    'underscore',

    'json2',

    'faclptController',

    'FacturaViewModel',

    'ConfigViewModel',

    'domReady'

    ], function (

        require,

        $,

        ko,

        knockout_kendo,

        _,

        json2,

        faclptController,

        FacturaViewModel,

        ConfigViewModel,

        domReady) {

 

                domReady(function () {

 

                // How to inline kendoCulture script here ???

               // If instead of using the require again I copy the contents of kendo.culture.es-MX.min here it works !!

                require(['kendoCulture']);

 

                kendo.culture("es-MX");

 

                $("#tabstrip").kendoTabStrip({

                            animation:{

                                open:{

                                    effects:"fadeIn"

                                }

                            }

 

                        });

 

 

                // knockout Bindings

                ko.applyBindings(FacturaViewModel, document.getElementById('Proceso'));

 

                ko.applyBindings(ConfigViewModel, document.getElementById('Configuracion'));

 

            });

 

 

});

[ririck]

I am having the same problem with latest version of Kendo.UI (tested with 716 and beta 912) and requirejs optimizer.

[Mihai]

Hi,

Riccardo, please give me some details about your setup.

Alberto, the culture files no longer depend on kendo-core, so they can be loaded in any order.  Also note that Kendo does not export anything for RequireJS (the `kendo` variable is global) so you should not name it in your function, that is, your first example should work properly if you correct the following:

    require([
        'jquery',
        'kendo',
        'kendoCulture',
        'knockout',
        'knockout_kendo',
        'underscore',
        'json2'
        ], function (
            $,
            kendo,           // rename to UNUSED, or something, to avoid shadowing the global.
            kendoCulture,    // this isn't needed either, but shouldn't hurt.
            ko,
            knockout_kendo,
            _,
            json2) {

I am not sure how shims work, but they're definitely not needed (your second example is worse than the first), and as for your third example, you cannot place `require(...)` in the middle of the code like that and expect it to work because RequireJS works asynchronously: the `require` function returns immediately, but the code is loaded later.  It always needs a callback.

Regards,
Mihai
Telerik