knockout-kendo and KendoUI 2016.1.112

[magnus-meridies]

Support for KendoUI 2016.1.112
Getting "Uncaught TypeError: Cannot read property 'data' of undefined" when running

[crashnick16]

+1

Any ideas on what may be the cause of this? In my case, I am using require.js and it seems that the kendo module is somehow initialised incorrectly.

[crashnick16]

i added a demo here that shows the issue:
http://dojo.telerik.com/orEca/2

As you will see, replacing the latest version 2016.1.112 with 2015.3.1111 will work just fine.

[bmsmg]

@crashnick16 I just ran your demo. I was able to get it to work by removing require.js (I selected the 20161.112 package from the dropdown). I don't think you have a kendo nor ko-kendo issue. http://dojo.telerik.com/UboLA

@magnus-meridies do you have a demo?

[magnus-meridies]

My test environment consists of requirejs 2.1.20, knockout 3.3.0, knockout-kendo 0.9.6 and kendoui 2015Q3. The pilot project works fine but when just changing the kendo.all.min.js file to 2016Q1 i got the error described above. So it seams like the combo requirejs and 2016Q1 doesnt play well together.

[charlessolar]

+1

I was also getting this problem. Seemed like somehow ko kendo is having trouble resolving kendo.
Its obviously an issue using kendo, ko kendo, and requirejs so fixing it by removing requirejs is like saying a broken down car is fixed after removing the engine...

Requirejs is the engine of the app you can't just remove it

[magnus-meridies]

I found this at Telerik's forum:
http://www.telerik.com/forums/issues-loading-latest-kendo-version-using-requirejs
But as a newbee on the area it didn't help me so much... Anyone understand how to make it work or is a change in requirejs needed?

[crashnick16]

Hi,

It seems that kendo is not working with requireJS anymore as the lib is not loaded and returned as undefined if require('kendo') is used...

Another issue I found is that Jquery is referenced as "jquery.min" as a dependency for the core but even fixing that does not help with the main problem ...

Sent from my iPhone

On 8 Feb 2016, at 23:43, bmsmg [email protected] wrote:

@crashnick16 I just ran your demo. I was able to get it to work by removing require.js (I selected the 20161.112 package from the dropdown). I don't think you have a kendo nor ko-kendo issue.

@magnus-meridies do you have a demo?

—
Reply to this email directly or view it on GitHub.

[bmsmg]

@Volak Correct, you are dependent upon requireJS. You also wouldn't go to your bank to ask how to fix your engine. The link posted by @magnus-meridies points to an issue with the minified 2016.1.112 version of kendo. The build process can result in the module exports being lost (or possibly incorrectly renamed). I think you will find proper guidance in that thread.

[mariusfilipowski]

Are there any plans to refactor this helpful component to support the new concept in the 2016 kendo module system?

We are using knockout with kendo but this is a breaking change. This is due to the fact that there's no single 'kendo' module anymore but each component is it's own module.

An idea:
Looking over the source of this library we've noted that it already is broken down to each component/control. Perhaps like knockout-jqueryui it could be refactored to individual modules that encapsulate one single control and can be required individually?

[csnance]

I haven't tried specifically but I think if you load the full kendo module and use requirejs maps you might be able to get this working with the latest kendo.
Loading full kendo module: http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-requirejs#use-bundle-scripts-with-requirejs
Create a similar mapping to the jquery noconflict mapping for kendo.all.min: http://requirejs.org/docs/jquery.html#noconflictmap

[codethug]

The problem is that the knockout-kendo code is trying to load a requireJS module named kendo, but the Kendo code no longer provides a module named 'kendo'. I added some lines in my requireConfig.js to use a shim to alias kendo to kendo.all.min, like this:

require.config({
    baseUrl: '../js',
    shim: {
        kendo: {
            deps: ['kendo.all.min']
        }
    },
    paths: {
        jquery: '../Scripts/jquery-3.1.1',
        knockout: '../Scripts/knockout-3.4.0',

        'kendo.all.min': '../Scripts/kendo/2016.3.1118/kendo.all.min',
        'knockout-kendo': '../Scripts/knockout-kendo.min',
    }
});

I then created a knockout component using the knockout-kendo data binding like this:

define(["knockout", "knockout-kendo"], function (ko) {
    "use strict";
    ko.components.register('datePicker', {
        // Take the param that is passed in to the component binding 
        // as the viewmodel using this very simple createViewModel factory function
        viewModel: function (vm) { return vm; },
        // I put the template on multiple lines here for readability, but in your code
        // you'll need to put it on all one line
        template: '
        <div>
            <div data-bind="css:iconClass"></div>
            <div data-bind="text:header"></div>
            <div data-bind="text:help"></div>
            <input data-bind="kendoDatePicker: dateValue" />
        <div>'
    });
});

[zphunk08]

I was able to get this to work by adding a map in my config file:
map:{ '*':{'kendo':'kendo.all.min'} }