Problem calling kendo.culture when using requirejs

5 posts, 0 answers
  1. Alberto
    Alberto avatar
    3 posts
    Member since:
    Sep 2012

    Posted 02 Sep 2012 Link to this post

    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



  2. Alberto
    Alberto avatar
    3 posts
    Member since:
    Sep 2012

    Posted 03 Sep 2012 Link to this post

    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'));
     
                });
     
     
    });
  3. Kendo UI is VS 2017 Ready
  4. Alberto
    Alberto avatar
    3 posts
    Member since:
    Sep 2012

    Posted 03 Sep 2012 Link to this post

    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'));
     
                });
     
     
    });

  5. ririck
    ririck avatar
    5 posts
    Member since:
    Jun 2003

    Posted 17 Sep 2013 Link to this post

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

  6. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 17 Sep 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready