Using KendoUI in requirejs-modules

3 posts, 0 answers
  1. Peter
    Peter avatar
    2 posts
    Member since:
    May 2016

    Posted 01 Jun Link to this post

    Hello everyone,

    I'm terribly sorry for busting in here without taking the proper time to get acquainted with these forums.
    I'm currently in China for a month and during this period I'd like to test Kendo UI, but here in China it's incredibly hard to work on servers outside China.
    Many sites are blocked, and the ones which aren't have a very slow connection and sometimes don't work properly (because certain resources are blocked).
    That's why it's very frustrating to try to develop something in a new framework; every search for information is so hard... So please forgive me if I'm asking questions which have already been answered.

    I'm trying to combine Kendo UI development with a RequireJS based site. But I don't want to use global variables and I want to put the code in a separate module (js-file) instead of the HTML-page. The sample on the Kendo UI site on requirejs didn't help me on that subject.
    For some reason I can't get that to work. The Kendo-methods are not defined in the jQuery-object and if I'm trying to use the kendo-object within a define or require method it keeps saying that it's "undefined".

    On top of that I'm still in the process of getting used to the use of modules nd requirejs.
    Could someone help me out, please?

    index.html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Testing KendoUI</title>
        <link rel="stylesheet" href="styles/kendoui/kendo.common-material.min.css" />
        <link rel="stylesheet" href="styles/kendoui/kendo.material.min.css" />
     
        <script data-main="js/main" src="js/require.js"></script>
    </head>
    <body>
        <div id="example">
            <div class="demo-section k-content">
                <h4>Choose shipping countries:</h4>
                <input id="countries" style="width: 300px;" />
                <div class="demo-hint">Start typing the name of an European country</div>
            </div>
        </div>
    </body>
    </html>


    main.js:
    requirejs.config(
    {
        paths: {
            kendo: "ext/kendoui"
        }
    });
     
    //Start the application
    require(["mod/autocomp"], function(pMod)
    {
        pMod.StartModule();
    });
        paths: {
            kendo: "ext/kendoui"
        }
    });
     
    //Start the application
    require(["mod/autocomp"], function(pMod)
    {
        pMod.StartModule();
    });


    autocomp.js:
    define(["jquery", "kendo/kendo.all.min"], function($, pKUI)
    {
        var
        ListItems = [],
        SetItems = function(pItems)
        {
            ListItems = pItems;
        },
        GetItems = function ()
        {
            return ListItems;
        },
        SetAutoComplete = function(pFieldID)
        {
            pKUI.jquery("#" + pFieldID).kendoAutoComplete({
                    dataSource: ListItems,
                    filter: "startswith",
                    placeholder: "Select country...",
                    separator: ", "
                });
        },
         
        StartModule = function()
        {
            SetItems([
                        "Albania",
                        "Andorra",
                        "Armenia",
                        //...
                        "United Kingdom",
                        "Vatican City"]);
     
            //create AutoComplete UI component
            SetAutoComplete("countries");
        };
             
            //Reveal the required methods publicly
        return {
            StartModule: StartModule
        };
         
    });

     

    I tried both "$" and "pKUI.jQuery", $ is defined but doesn't contain any Kendo items, and pKUI just isn't defined at all.

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 03 Jun Link to this post

    Hello,

    please use this runnable sample as your starting point.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Peter
    Peter avatar
    2 posts
    Member since:
    May 2016

    Posted 04 Jun Link to this post

    Thanks, I already stated that the examples on the kendo-ui-site didn't help me, though.

    Yet I think I found the reason why I couldn't get it to work, and it's logical. Kendo UI requires that the root directory of the require-environment (the baseUrl) is the kendo-library (yes, indeed, it's set like that in the example, but I assumed that was because they were test-files and they had no other script-files). Within the kendo-files, all js-filenames are called directly, without a path (relatively, which is normal).

    So, in order to solve this, I either have to make the KendoUI-folder the base-URL (dirty, as I will have to create a custom path for all other folders of my own files), or I will have to make a custom path for all kendo-files to rename their "filenames" to relative paths (even dirtier).

    I guess for now I'll be making a path for my own js-directories.
Back to Top