How to properly use Kendo with angularjs and requirejs?

7 posts, 0 answers
  1. Albert
    Albert avatar
    4 posts
    Member since:
    Jan 2017

    Posted 02 Feb Link to this post

    I tried the sample on http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-requirejs

    But it is loading kendo.all which defeats the purpose of just loading individual scripts

  2. Albert
    Albert avatar
    4 posts
    Member since:
    Jan 2017

    Posted 02 Feb Link to this post

    Also tried this sample code, it works on 2015 version but has an error when using on 2016.1.406 version or even the 2017.1.118 version

     

    <!doctype html>
    <html>
        <head>
            <title>Test</title>
            <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.material.min.css">
            <!-- Include RequireJS -->
        </head>
        <body>
            <div ng-controller="controller">
              <select kendo-drop-down-list k-options="options"></select>
            </div>
            <script>
              require.config({
                paths: {
                  "jquery": "http://code.jquery.com/jquery-1.9.1.min",
                  "kendo": "http://kendo.cdn.telerik.com/2015.2.902/js/"
                },
                shim: {
                  "angular": { deps: ["jquery"] },
                  "kendo/kendo.angular.min": { deps: ["angular"] },
                  "app": {
                     "deps": ["angular"]
                  }
                }
              });
              require([ "angular", "kendo/kendo.dropdownlist.min", "kendo/kendo.angular.min" ], function() {
                var app = angular.module("app", ["kendo.directives"]);
                app.controller("controller", ["$scope", function($scope) {
                  $scope.options = {
                    dataSource: {
                      data: [{name:"Jane Doe", value: 1}, {name:"John Doe", value: 2}]
                    },
                    dataTextField: "name",
                    dataValueField: "value"
                  };
                }]);
                angular.bootstrap(document, ["app"]);
              });
            </script>
        </body>
    </html>
  3. Stefan
    Admin
    Stefan avatar
    416 posts

    Posted 06 Feb Link to this post

    Hello Albert,

    The example is working with no errors on my end, please refer to the Dojo example and advise if I missed something:

    http://dojo.telerik.com/OZorI

    As for loading kendo.all.min, this is general example demonstrating how to used Kendo UI with Require and AngularJS. The custom builder can be used to create a script file with only the required widgets:

    http://www.telerik.com/download/custom-download

    Still, if the desired result is to load different scripts for different widgets, this is currently not supported as only one Kendo UI script file can be loaded on the page:

    http://docs.telerik.com/kendo-ui/intro/installation/what-you-need

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Albert
    Albert avatar
    4 posts
    Member since:
    Jan 2017

    Posted 06 Feb in reply to Stefan Link to this post

    Hello,

    The Dojo you provided uses the kendo.all, however when calling it individually it doesnt
    http://dojo.telerik.com/omeFE (the 2015 kendo)

    http://dojo.telerik.com/idEYi (the 2017 kendo)

    both are the same and only the referenced kendo files are different.


    And is this scenario possible on a spa Website:

    - Login page has a dropdown

    - Main page has a grid

    - kendo.grid.js is only loaded when Main page is loaded in the SPA?

  5. Stefan
    Admin
    Stefan avatar
    416 posts

    Posted 08 Feb Link to this post

    Hello Albert,

    This is because of the specifics of loading Kendo UI with AngularJS.

    When Angular is not included the modules can be loaded for the specific widgets.

    That is why we made an example with kendo.all.min with the latest versions.

    Apologies for the inconvenience this may cause you.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Albert
    Albert avatar
    4 posts
    Member since:
    Jan 2017

    Posted 08 Feb in reply to Stefan Link to this post

    "When Angular is not included the modules can be loaded for the specific widgets."

    Angular as in the library itself? Or the kendo.angular for the angular directives?

     

    And how would I be registering separate kendo widgets on the individual controllers?

    var  app = angular.module("app");
    app.controller("controller1", ["$scope", "kendo.dropdown???", function($scope) { });
    app.controller("controller2", ["$scope", "kendo.datepicker???", function($scope) { });
  7. Stefan
    Admin
    Stefan avatar
    416 posts

    Posted 09 Feb Link to this post

    Hello Albert,

    Regarding the questions:

    1) The specific is coming more from the kendo.angular directive.

    2) The second question will hit the same limitation as an example where kendo.dropdownlist (or any other widget) is required individually.

    I understand that this is not perfect when using require, but currently, this is the suggested approach.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top