or
1 answer
327 views
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:
1. Including the kendo scripts and styles
2. Adding kendo.directives to my angular module
3. 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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<input kendo-date-picker ng-model="model.user.dob" />
<!-- end snippet -->
The same error happens when I try to use a drop down list defined as:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<select kendo-drop-down-list k-data-source="model.languages" ng-model="model.user.language"></select>
<!-- end snippet -->
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
1. Including the kendo scripts and styles
2. Adding kendo.directives to my angular module
3. 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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<input kendo-date-picker ng-model="model.user.dob" />
<!-- end snippet -->
The same error happens when I try to use a drop down list defined as:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<select kendo-drop-down-list k-data-source="model.languages" ng-model="model.user.language"></select>
<!-- end snippet -->
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
Petyo
Telerik team
answered
on
14 Nov 2016
5 answers
148 views
Is there an angular example of the JS "Edit Kendo UI Grid records using an external form" example from the documentation?
I have not been able to figure out how to get the grid over edit form to work in angular or how to translate some of the things from that example. All attempts to reference the .one method in the sample it throws errors that it cannot be found.
Any help would be greatly appreciated
Boyan Dimitrov
Telerik team
answered
on
09 Nov 2016
3 answers
118 views
Hi, I am new to Kendo and I want to integrate iscroll feature in Kendo. can u plz help me in implementing.
For reference, http://iscrolljs.com/
Thanks in advance.
Dimo
Telerik team
answered
on
25 Oct 2016
13 answers
2.8K+ views
Hi
After Save the data into data base using grid kendo ui, how to print the notification message on screen using Spring +kendo ui
How it possible and how can i do?
Thanks
After Save the data into data base using grid kendo ui, how to print the notification message on screen using Spring +kendo ui
How it possible and how can i do?
Thanks
Vladimir Iliev
Telerik team
answered
on
24 Oct 2016
2 answers
179 views
Hi,
we recently upgraded our KendoUI version to 2016.2.714. Before we had 2015.1.429 and the multiSelect filter worked like a charm.
For getting the data, we use an angular service:
[ // ... { field: "myField", title: "my title", hidden: false, values: model.fkValues.myValues, filterable: { multi: true, dataSource: model.fkValues.myValues, }}]The error appears, when you click on the filter icon. It is somehow thrown in an kendo ui click handler. See our browser debugger stack trace
Uncaught ReferenceError: myField is not defined:
- (anonymous function) @ VM13474:3
- render @ kendo.all.min.js:25
- proxy @ jquery.js:512
- createCheckBoxes @ kendo.all.min.js:43
- refresh @ kendo.all.min.js:43
- options.forceUnique.checkChangeHandler @ kendo.all.min.js:43
- trigger @ kendo.all.min.js:25
- _process @ kendo.all.min.js:28
- success @ kendo.all.min.js:27
- success @ kendo.all.min.js:27
- n.success @ kendo.all.min.js:27
- fire @ jquery.js:3099
- fireWith @ jquery.js:3211
- done @ jquery.js:8264
- (anonymous function) @ jquery.js:8605
We have included angularjs 1.2.29, jquery 1.7.1 and jquery-ui 1.10.1
Thanks
Onlineprinters
Top achievements
Rank 1
Rank 1
answered
on
13 Sep 2016
5 answers
196 views
Dear Telerik Team.
I try to access a schedulerview's table and its resources to redefine the slot background colors. Unfortunately there are two properties missing to do that in typescript.
In Javascript
let view = scheduler.view();view.table.find("td[role=gridcell]").each(function () { ... });let resources = view.resources;works. In Typescript VS2015 shows me two errors. One at "table" anbd one at "resources".
Can you please update the definitions file? Maybe in a not too far future? :)
Thanks in advance
Bernd
Alex Hajigeorgieva
Telerik team
answered
on
23 Aug 2016
1 answer
247 views
Hi
I'm using kendoui in conjunction with aurelia and have followed the steps described in the aurelia-kendoui-bridge plugin documentation to setup the use of kendo copying the js and styles folder to a project folder called vendors and everything is working quite fine except when trying to create a bundle with required kendoui libs.
I have create a bundle like this:
"dist/kendo-bundle":{ "includes":[ 'jquery', "aurelia-kendoui-bridge", "aurelia-kendoui-bridge/common/options-builder.js", "aurelia-kendoui-bridge/common/template-compiler.js", "aurelia-kendoui-bridge/common/template-gatherer.js", "aurelia-kendoui-bridge/common/template.js", "aurelia-kendoui-bridge/grid/col.html!text", "aurelia-kendoui-bridge/grid/col.js", "aurelia-kendoui-bridge/grid/grid.html!text", "aurelia-kendoui-bridge/grid/grid.js", "aurelia-kendoui-bridge/pdf/pdf.js", "css", "kendo.autocomplete.min", "kendo.binder.min", "kendo.color.min", "kendo.columnmenu.min", "kendo.columnsorter.min", "kendo.core.min", "kendo.data.min", "kendo.data.odata.min", "kendo.data.signalr.min", "kendo.data.xml.min", "kendo.drawing.min", "kendo.editable.min", "kendo.filtermenu.min", "kendo.grid.min", "kendo.groupable.min", "kendo.menu.min", "kendo.mobile.actionsheet.min", "kendo.mobile.loader.min", "kendo.mobile.pane.min", "kendo.mobile.popover.min", "kendo.mobile.shim.min", "kendo.mobile.view.min", "kendo.pager.min", "kendo.progressbar.min", "kendo.reorderable.min", "kendo.resizable.min", "kendo.selectable.min", "kendo.sortable.min", "kendo.validator.min", "kendo.view.min", "kendo.window.min", "kendo-ui/styles/kendo.common.min.css!text", "kendo-ui/styles/kendo.material.min.css!text" ], "excludes":[ "aurelia-binding/**/*.*", "aurelia-dependency-injection/**/*.*", "aurelia-loader/**/*.*r", "aurelia-metadata/**/*.*", "aurelia-pal/**/*.*", "aurelia-path/**/*.*", "aurelia-task-queue/**/*.*", "aurelia-templating/**/*.*", "aurelia-templating-resources", ], "options": { "inject": true, "minify": true, "depCache": false, "rev": false } },After bundling, in config I can see what the bundle contains:
"kendo-bundle.js": [ "github:systemjs/plugin-css@0.1.25.js", "github:systemjs/plugin-css@0.1.25/css.js", "kendo-ui/styles/kendo.common.min.css!github:systemjs/plugin-text@0.0.8.js", "kendo-ui/styles/kendo.material.min.css!github:systemjs/plugin-text@0.0.8.js", "kendo.autocomplete.min", "kendo.binder.min", "kendo.calendar.min", "kendo.color.min", "kendo.columnmenu.min", "kendo.columnsorter.min", "kendo.combobox.min", "kendo.core.min", "kendo.data.min", "kendo.data.odata.min", "kendo.data.signalr.min", "kendo.data.xml.min", "kendo.datepicker.min", "kendo.draganddrop.min", "kendo.drawing.min", "kendo.dropdownlist.min", "kendo.editable.min", "kendo.excel.min", "kendo.filtercell.min", "kendo.filtermenu.min", "kendo.fx.min", "kendo.grid.min", "kendo.groupable.min", "kendo.list.min", "kendo.menu.min", "kendo.mobile.actionsheet.min", "kendo.mobile.loader.min", "kendo.mobile.pane.min", "kendo.mobile.popover.min", "kendo.mobile.scroller.min", "kendo.mobile.shim.min", "kendo.mobile.view.min", "kendo.numerictextbox.min", "kendo.ooxml.min", "kendo.pager.min", "kendo.pdf.min", "kendo.popup.min", "kendo.progressbar.min", "kendo.reorderable.min", "kendo.resizable.min", "kendo.selectable.min", "kendo.sortable.min", "kendo.userevents.min", "kendo.validator.min", "kendo.view.min", "kendo.window.min", "npm:aurelia-kendoui-bridge@0.11.9.js", "npm:aurelia-kendoui-bridge@0.11.9/common/bindables.js", "npm:aurelia-kendoui-bridge@0.11.9/common/constants.js", "npm:aurelia-kendoui-bridge@0.11.9/common/control-properties.js", "npm:aurelia-kendoui-bridge@0.11.9/common/decorators.js", "npm:aurelia-kendoui-bridge@0.11.9/common/options-builder.js", "npm:aurelia-kendoui-bridge@0.11.9/common/template-compiler.js", "npm:aurelia-kendoui-bridge@0.11.9/common/template-gatherer.js", "npm:aurelia-kendoui-bridge@0.11.9/common/template.js", "npm:aurelia-kendoui-bridge@0.11.9/common/util.js", "npm:aurelia-kendoui-bridge@0.11.9/common/widget-base.js", "npm:aurelia-kendoui-bridge@0.11.9/config-builder.js", "npm:aurelia-kendoui-bridge@0.11.9/grid/col.html!github:systemjs/plugin-text@0.0.8.js", "npm:aurelia-kendoui-bridge@0.11.9/grid/col.js", "npm:aurelia-kendoui-bridge@0.11.9/grid/grid.html!github:systemjs/plugin-text@0.0.8.js", "npm:aurelia-kendoui-bridge@0.11.9/grid/grid.js", "npm:aurelia-kendoui-bridge@0.11.9/index.js", "npm:aurelia-kendoui-bridge@0.11.9/pdf/pdf.js", "npm:jquery@2.1.4.js", "npm:jquery@2.1.4/dist/jquery.min.js" ],Please, notice that the following files are in the bundle:
"kendo.core.min",
"kendo.data.min",
"kendo.data.odata.min",
"kendo.data.signalr.min",
"kendo.data.xml.min",
"kendo-ui/styles/kendo.common.min.css!github:systemjs/plugin-text@0.0.8.js",
"kendo-ui/styles/kendo.material.min.css!github:systemjs/plugin-text@0.0.8.js",
In my aurelia view model class I'm importing kendo.data.min in order to being able to instantiate a kendo.data.dataSource instance:
import 'core.data.min'export class MyViewModel{public activate(){ this.data = new kendo.data.DataSource({ data: this.myData, page: 1, pageSize: 50, });}}Then in the view, I'm also importing the required css files:
<template> <require from="kendo-ui/styles/kendo.common.min.css!"></require> <require from="kendo-ui/styles/kendo.material.min.css!"></require> <require from="aurelia-kendoui-bridge/grid/grid"></require> <require from="aurelia-kendoui-bridge/grid/col"></require> <require from="aurelia-kendoui-bridge/common/template"></require>...</template>If i then run the app in my development machine I can see that :
"kendo.core.min.js",
"kendo.data.min.js",
"kendo.data.odata.min.js",
"kendo.data.signalr.min.js",
"kendo.data.xml.min.js",
"kendo-ui/styles/kendo.common.min.css",
"kendo-ui/styles/kendo.materiak.min.css",
all these files are loaded individually when they should be loaded through the bundle (kendo-bundle is correctly loaded and I can see a kendoGrid widget working fine. If I remove the import of kendo.data.min from my view model I can then see that kendo.core.min.js, kendo.data.min.js, kendo.data.odata.min.js, kendo.data.signalr.min.js and kendo.dataxml.min.js files are not loaded (but I can instantiante a kendo.data.dataSource
It seems is mapping and paths issue with jspm config, but I'm unable to figure out what's happening
my config,js paths section looks like:
paths: { "*": "dist/*", "github:*": "jspm_packages/github/*", "npm:*": "jspm_packages/npm/*", "kendo.*": "vendors/js/kendo.*.js", "kendo-ui/*": "vendors/*" },
and my package.json jspm section looks like:
"jspm": { "dependencies": { "aurelia-animator-css": "npm:aurelia-animator-css@^1.0.0-rc.1.0.0", "aurelia-binding": "npm:aurelia-binding@^1.0.0-rc.1.0.3", "aurelia-bootstrapper": "npm:aurelia-bootstrapper@^1.0.0-rc.1.0.1", "aurelia-event-aggregator": "npm:aurelia-event-aggregator@^1.0.0-rc.1.0.0", "aurelia-fetch-client": "npm:aurelia-fetch-client@^1.0.0-rc.1.0.1", "aurelia-framework": "npm:aurelia-framework@^1.0.0-rc.1.0.2", "aurelia-history-browser": "npm:aurelia-history-browser@^1.0.0-rc.1.0.0", "aurelia-html-import-template-loader": "npm:aurelia-html-import-template-loader@^1.0.0-rc.1.0.0", "aurelia-i18n": "npm:aurelia-i18n@^1.0.0-rc.1.0.0", "aurelia-kendoui-bridge": "npm:aurelia-kendoui-bridge@^0.11.9", "aurelia-loader-default": "npm:aurelia-loader-default@^1.0.0-rc.1.0.0", "aurelia-logging-console": "npm:aurelia-logging-console@^1.0.0-rc.1.0.0", "aurelia-pal-browser": "npm:aurelia-pal-browser@^1.0.0-rc.1.0.1", "aurelia-path": "npm:aurelia-path@^1.0.0-rc.1.0.0", "aurelia-polyfills": "npm:aurelia-polyfills@^1.0.0-rc.1.0.0", "aurelia-polymer": "github:roguePanda/aurelia-polymer@1.0.0-beta", "aurelia-router": "npm:aurelia-router@^1.0.0-rc.1.0.1", "aurelia-task-queue": "npm:aurelia-task-queue@^1.0.0-rc.1.0.0", "aurelia-templating": "npm:aurelia-templating@^1.0.0-rc.1.0.1", "aurelia-templating-binding": "npm:aurelia-templating-binding@^1.0.0-rc.1.0.1", "aurelia-templating-resources": "npm:aurelia-templating-resources@^1.0.0-rc.1.0.1", "aurelia-templating-router": "npm:aurelia-templating-router@^1.0.0-rc.1.0.1", "aurelia-validation": "npm:aurelia-validation@0.6.7", "bluebird": "npm:bluebird@^3.4.1", "css": "github:systemjs/plugin-css@^0.1.25", "fetch": "github:github/fetch@^1.0.0", "i18next-xhr-backend": "npm:i18next-xhr-backend@^0.6.0", "jquery": "npm:jquery@2.1.4", "numbro": "npm:numbro@^1.8.1", "text": "github:systemjs/plugin-text@^0.0.8" }, "devDependencies": {} },
Daní
Top achievements
Rank 1
Rank 1
answered
on
27 Jul 2016
1 answer
331 views
Gantt chart
1. How can I enable filtering and groupable option in gannt.
2. How can I enable Pagination
3. How can I add multiple task in same resource
Boyan Dimitrov
Telerik team
answered
on
22 Jun 2016
4 answers
588 views
I need to specify the width of the dropdown. Is there a way to do this in angular?
Patrick | Technical Support Engineer, Senior
Telerik team
answered
on
15 Jun 2016
3 answers
115 views
Hello,
Its been a while Angularjs 1.5 was released. My question is that, when you are going to support Angular 1.5?
Regards
Kiril Nikolov
Telerik team
answered
on
20 May 2016
