This is a migrated thread and some comments may be shown as answers.
Problem calling kendo.culture when using requirejs
4 Answers 289 Views
This is a migrated thread and some comments may be shown as answers.
Alberto
Top achievements
Rank 1
Alberto asked on 02 Sep 2012, 05:53 AM
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



4 Answers, 1 is accepted

Sort by
0
Alberto
Top achievements
Rank 1
answered on 03 Sep 2012, 07:59 AM
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'));
 
            });
 
 
});
0
Alberto
Top achievements
Rank 1
answered on 04 Sep 2012, 03:37 AM
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'));
 
            });
 
 
});

0
ririck
Top achievements
Rank 1
answered on 17 Sep 2013, 07:33 AM
I am having the same problem with latest version of Kendo.UI (tested with 716 and beta 912) and requirejs optimizer.

0
Mihai
Telerik team
answered on 17 Sep 2013, 08:42 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Alberto
Top achievements
Rank 1
Answers by
Alberto
Top achievements
Rank 1
ririck
Top achievements
Rank 1
Mihai
Telerik team
Share this question
or