The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.
Codepen is here
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:
We have included angularjs 1.2.29, jquery 1.7.1 and jquery-ui 1.10.1
Thanks
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
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": {}
},
Hello,
Its been a while Angularjs 1.5 was released. My question is that, when you are going to support Angular 1.5?
Regards
I have a page with Angular kendo directives are used for display of kendo graphs.
<div kendo-chart="mydata.myChart"
k-chart-area="{ background: '', height:220 }"
k-series-defaults="{ type: 'area', markers: { visible: true }, area: { line: { style: 'smooth' } }, missingValues: 'interpolate', stack: 'true' }"
k-series="[{ name: 'Running devices', categoryField: 'date', field: 'devicesUpCount', color:'#65c178' },
{ name: 'Stopped Devices', categoryField: 'date', field: 'devicesDownCount', color:'#f5985a' }]"
k-value-axis="{
labels: { format: '{0}'},
title: { text: 'Count of devices', font:'10px', position:'center', margin:0 },
line: {visible: true},
majorGridLines: {
dashType: 'dashDot'
}
}"
k-category-axis="{
baseUnit: 'hours',
baseUnitStep: 1,
labels: { step: 2},
title: { text: 'Time', font:'10px', position:'center', margin:0},
majorGridLines: {
dashType: 'dot'
}
}"
k-data-source="myData.myKDataSource"
k-transitions="false"
k-tooltip="{
visible: true,
format: '{0}',
template: ' #= value # #= series.name # on #= category#'
}"
k-data-bound="connectorMetadata.downtimeChartDataBound"
>
</div>
Is there a protractor based test case example with which I can verify the values being display on this graph ? I need to also verify the legends and values shown on the graph. What's the best way to achieve this ?
Uncaught TypeError: Cannot call method 'triggerBeforeShow' of undefined
The application has a stub default view that redirects to the main home view.
A sample cordova project to reproduce the error is included. Run from VS Empulator 5" KitKat or from an android device.
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<!--
Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
For details, see http://go.microsoft.com/fwlink/?LinkID=617521
-->
<
meta
http-equiv
=
"Content-Security-Policy"
content
=
"default-src 'self' http://cdn.kendostatic.com ; http://ajax.googleapis.com http://code.jquery.com ; https://caredarewebapi.azurewebsites.net ; https://localhost:44309/ https://localhost:44300/ https://caredarestorage.blob.core.windows.net/ 'unsafe-eval' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"
>
<
title
>CorovaStartupNavigationTest</
title
>
<!-- CorovaStartupNavigationTest references -->
<
link
href
=
"css/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"scripts/index.js"
></
script
>
</
head
>
<
body
kendo-mobile-application
skin
=
"'flat'"
ng-app
=
"sushiMobileApp"
>
<
kendo-mobile-view
id
=
"viewLogin"
data-title
=
"Login"
ng-controller
=
"indexController"
k-on-before-show
=
"showHome(kendoEvent)"
>
</
kendo-mobile-view
>
<
script
src
=
"cordova.js"
></
script
>
<
script
src
=
"scripts/platformOverrides.js"
></
script
>
<
script
src
=
"scripts/jquery.min.js"
></
script
>
<
script
src
=
"scripts/angular.js"
></
script
>
<
script
src
=
"scripts/kendo.all.min.js"
></
script
>
<
script
src
=
"app/modules/cdlogin.js"
></
script
>
<
script
>
angular.module('sushiMobileApp', ['kendo.directives', 'cdlogin'])
.controller('indexController', ['$scope', function ($scope) {
$scope.showHome = function (kendoEvent) {
kendo.mobile.application.navigate("/app/views/viewtabhome.html");
}
$scope.onCommand = function (kendoEvent) {
$scope.command = kendoEvent.currentTarget.data("command");
switch ($scope.command) {
case "login":
kendo.mobile.application.navigate('/app/views/viewlogin.html');
break;
}
}
}]);
;
</
script
>
</
body
>
</
html
>
The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.
Codepen is here
http://codepen.io/jcbowyer/pen/wGrLmE
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Kendo UI Mobile Loves AngularJS</
title
>
<
link
rel
=
"stylesheet"
href
=
"http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css"
>
<!-- the application CSS file -->
<
script
src
=
"http://code.jquery.com/jquery-1.9.1.min.js"
></
script
>
<
script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"
></
script
>
<
script
src
=
"http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"
></
script
>
</
head
>
<
body
kendo-mobile-application
ng-app
=
"sushiMobileApp"
>
<
kendo-mobile-view
id
=
"index"
>
<
kendo-mobile-header
>
<
kendo-mobile-nav-bar
>
Home View
<
button
kendo-mobile-button
k-align
=
"'right'"
data-icon
=
"'contacts'"
id
=
"btnProfile"
k-on-click
=
"mnuProfile.open($('#btnProfile'))"
></
button
>
</
kendo-mobile-nav-bar
>
</
kendo-mobile-header
>
<
ul
kendo-mobile-action-sheet
=
"mnuProfile"
k-on-command
=
"onCommand(kendoEvent)"
k-type
=
"'auto'"
>
<
li
><
a
href
=
"#"
data-command
=
"login"
>Login</
a
></
li
>
<
li
ng-hide
=
"(authentication.token.length == 0)"
><
a
href
=
"#"
data-command
=
"logout"
>Logout</
a
></
li
>
<
li
><
a
href
=
"#"
data-command
=
"showProfile"
>My Profile</
a
></
li
>
</
ul
>
</
kendo-mobile-view
>
<
script
>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</
script
>
</
body
>
</
html
>