I am using Angular 1.5.* together with Kendo UI. I am following the documentation and have completed all the recommended steps found on the Telerik site:
Including the kendo scripts and styles
Adding kendo.directives to my angular module
Using the kendo-[directive] syntax in the markup
Everything renders fine, but when I try to interact with the widgets I am getting the following error:
Uncaught TypeError: f.getClientRects is not a function(…)
This is what my markup looks like:
<input kendo-date-picker ng-model="model.user.dob" />
The same error happens when I try to use a drop down list defined as:
<select kendo-drop-down-list k-data-source="model.languages" ng-model="model.user.language"></select>
I have used Kendo for years, but for the first time, I am using it together with Angular and feel a little lost :)
What am I missing? Any help would be greatly appreciated.
Thank you
I would make sure you have the kendo scripts in the right dependency order
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="./bower_components/angular/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
Another thing that might work for older versions of kendo, is trying the deprecated angular-kendo npm package
<script src="./bower_components/angular-kendo/angular-kendo.js"></script>
Or, it could be caused from the animations so try angular-animate npm package:
<script src="./bower_components/angular-animate/angular-animate.js"></script>
Another thing you might want to check is the date going into the Kendo DatePicker
$scope.model.user.dob = new Date('2016-06-01T04:00:00');
It turns out that the issue was in the kendo version I was using. Once I upgraded to the latest build, everything went back to normal.
Related
I'm not able to render simple angular material components even after including all the necessary dependencies.
HTML
<div ng-app="MyApp" layout="row">
<md-button>Button</md-button>
</div>
JS
angular.module('MyApp', ['ngMaterial']);
Here's the link with all the dependencies included:
https://jsfiddle.net/rxby6cac/3/
Confused... What's the issue with this simple code?
I've updated your fiddle... it was fine, the problem was the load type (see picture below). You have to change it to load type no wrap - <body>.
Additionally, I've note that your are using a angular material RC (Release Candidate) version. As a advice try to use a stable version (move to 1.1.3).
this is in the directive.
Have been pounding my brains out for days on this
angular 1.4.7
angular-ui-calendar 1.0.1
fullcalendar 2.3.1 2.4.0 etc
jquery 2.1.4, 2.1.3, 2.1.1
any one else running into this??
You don't list moment.js as one of your dependent scripts, but it is required by full calendar.
I created a plunk just to try this out and I did indeed get the error, but you'll note right above the error you mentioned it complains about moment not being available.
You haven't given me much to go on, but since you didn't mention moment in your dependent scripts that's the best guess I can come up with. If you remove the comment tags that surround the moment.js script in index.html in the plunk I provided, it will render the calendar.
<!--
<script data-require="moment.js#2.10.2" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
-->
I tried working on the following plunker example which works fine with angular version 1.2.x.
But when the angular version is updated from 1.2.x to 1.3.x.
It does not seem to work.
The views does not seem to change when I click on the other tab.
http://plnkr.co/edit/nmTggEdWIcMW5bMRKiok?p=preview
The following change was made to the plunker.
<script data-require="angular.js#1.3.x" src="http://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script data-require="angular-animate#*" data-semver="1.3.15" src="http://code.angularjs.org/1.3.15/angular-animate.js"></script>
When tried on the chrome, there were no errors generated on the browser console but the views did not change when clicked on the second tab. Browser used Chrome-latest-version.
Might be a duplicate of
AngularJS, animations with ui router which versions work?
PS: I tried different combination of the bootstrap versions and angular-ui-router versions with angular 1.3.x. Was not able to find a successful combination. I use angular-material-design which requires angularjs version to be 1.3.x. Any help on this issue would be appreciated.
Recently, I have an error regarding to my pagination that can't be updated after filter. Luckily, this was managed, however, now I'm dealing with a conflict regarding to the usage of ui-bootstrap. As I have my project, Im using,
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
Based on the codes that I'm relaying with they used,
<script src="angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.2.0.js"; type="text/javascript"></script>
***Here's the thing, I do have as well a datepicker in my codes. But when I used the
<script src="angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.2.0.js"; type="text/javascript"></script>
this datepicker doesn't work. If now I will switch to my formerly ui-bootstrap
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
, now the pagination after filter can't be used but the datepicker will work. Any ideas how to solve this or what I'm going to do? thanks!
From what I understand, your problem is due to directive conflict; e.g. you have a custom directive defined called "datepicker":
angular.module('App').directive('datepicker', ...
That's going to cause problems because UI-Bootstrap also defines a directive with the same name. The simplest solution would be to simply exclude the datepicker module from UI-Bootstrap.
https://angular-ui.github.io/bootstrap/
On their website, you can choose "create a build". It will allow you to download a version of UI-Bootstrap custom-tailored to your needs by adding and removing certain modules, like the datepicker.
Then you will drop the file into your HTML:
<script src="path/to/your/ui-bootstrap.min.js"></script>
I notice you are using Bower to manage your dependencies. Unfortunately, Bower can't work with a custom UI-Bootstrap build; you'll have to manage the file yourself (put it in a subdirectory, like "assets/").
Hello I am using UI Bootstrap for displaying datepicker in my app.
this is my reference order:
<!--ANGULAR CORE-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"></script>
<!--APPLICATION INIT-->
<script src="app/js/app.js"></script>
<!--JQUERY-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!--BOOTSRAP UI-->
<script src="app/js/libs/ui-bootstrap-tpls-0.11.0.min.js"></script>
I use the tpls version because it supposes to include the templates.
I inject the dependency like that:
angular.module('globapp', ['ngRoute', 'ui.bootstrap'])
when I try to popup the datepicker it doesn't show. In the chrome developer I can see that the code searches for template folder, and I recieve 404 error (datepicker.html, popup.html).
I searched about that in the internet, and everyone tells the same thing: if I use the tpls version, it should provide me the default templates.
thanks
Your app.js has your app init -so that's where your creating your angular module and are hoping to inject bootstrap-ui as a dependency but that script hasn't been loaded yet as it's last in the list.
This would be the first thing to check. Load your scripts in order of least dependent first so jquery first then your core angular, then your plugin libraries and then your app scripts.