This is a migrated thread and some comments may be shown as answers.

[Solved] Using KendoUI in requirejs-modules

2 Answers 374 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Peter asked on 01 Jun 2016, 11:16 AM

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>

</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 Answers, 1 is accepted

answered on 04 Jun 2016, 12:47 PM

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.