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
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
>
I have a many-to-many relationship between Contacts and Users in a UserContact entity. A contact and its related users are pulled down in a single JSON request. The contact object has a userContacts property that contains all of the related userContact records. Each userContact has as user property that contains additional info about the user. I am using a grid to maintain the users associated with the current contact (contact.userContacts). I put the grid in an Angular 1.5 component, and I pass in the current contact.
Everything is working, except that new records added in the grid are not making it back to the model. If I change the user on an existing record, it works fine. I tried the suggestions on this page, but I couldn't get it to work. I'm not sure how to apply the ObservableArray() to my code. I am using a drop-down list in the grid, but that appears to be working fine. Can you see what I'm doing wrong?
Here's the HTML pulling in the component to my main Contact view:
<
div
class
=
"col-sm-offset-1 col-md-offset-1"
>
<
contact-user-list
contact
=
"vm.contact"
/>
</
div
>
Here's the Angular HTML template for the component:
<
div
kendo-grid
id
=
"contractUserGrid"
k-options
=
"contactUserList.userGridOptions()"
k-rebind
=
"contactUserList.contact"
k-selectable
=
"true"
k-navigatable
=
"true"
>
</
div
>
Javascript for the component:
(
function
() {
'use strict'
;
var
app = angular.module(
"app.contacts"
);
app.component(
'contactUserList'
, {
templateUrl:
'app/contacts/contact-user-list.html'
,
controllerAs:
'contactUserList'
,
controller: [
'userService'
, ContactUserListController],
bindings: {
contact:
'='
}
});
function
ContactUserListController(userService) {
var
vm =
this
;
vm.userList = userService.getUserList();
vm.userDropDown =
function
(container, options) {
var
editor = $(
'<input kendo-drop-down-list required k-data-text-field="\'userName\'" k-data-value-field="\'userID\'" k-data-source="contactUserList.userList" data-bind="value:'
+ options.field +
'"/>'
)
.appendTo(container);
};
vm.userGridOptions =
function
() {
return
{
dataSource: vm.userContactsData(),
toolbar: [
"create"
],
editable:
true
,
columns: [
{ field:
"user"
, title:
"Counselor3"
, editor: vm.userDropDown, template:
"#=user.userName#"
},
{ command:
"destroy"
, title:
" "
, width:
"90px"
}
]
};
};
vm.userContactsData =
function
() {
var
dataSource =
new
kendo.data.DataSource({
data: vm.contact ? vm.contact.userContacts :
null
,
autoSync:
true
,
schema: {
model: {
id:
"userContactID"
,
fields: {
userContactID: { defaultValue: 0 },
userID: { defaultValue: 0 },
contactID: { defaultValue: vm.contact ? vm.contact.contactID : 0 },
user: { defaultValue: { userID: 1, userName:
"Administrator"
, userRole:
"admin"
} }
}
}
}
});
return
dataSource;
};
}
})();
Finally, userService.getUserList():
function
getUserList() {
if
(!svc.userData) {
svc.userData =
new
kendo.data.DataSource({
type:
"webapi"
,
transport: {
read:
"../api/users/"
,
cache:
"inmemory"
},
schema: {
data:
"data"
,
total:
"total"
,
errors:
"errors"
}
});
}
return
svc.userData;
}
Hi,
VS 2015, Cordova, Kendo UI Core v2015.3.930, AngularJS v1.5.0, ngCordova v0.1.23-alpha
I'm trying to get a drawer working with remote views, but my angular controller bound to app/views/settings.html won't fire:
index.html:
<!-- application drawer and contents -->
<div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Navigation" data-ng-controller="drawerController as vm">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<ul data-role="listview">
<li>
<a href="app/views/settings.html">Remote Settings</a>
</li>
<li><a href="#internSettings">Intern Settings</a></li>
</ul>
</div>
<div data-role="view" data-title="InternSettings" data-layout="main" id="internSettings" data-ng-controller="settingsController as vm">
<h1 data-bind="html: title"></h1>
<h1>{{vm.helloMsg}}</h1>
</div>
app/views/settings.html:
<div data-role="view" data-title="Settings" data-layout="main" data-ng-controller="settingsController as vm">
<h1 data-bind="html: title"></h1>
<h1>{{vm.helloMsg}}</h1>
</div>
settingsController.js:
(function () {
'use strict';
function settingsController() {
this.helloMsg = "Hello settingsController";
}
angular.module("iEmosApp.controllers").controller('settingsController', [settingsController]);
})();
When clicking on "Intern Settings" (using the view inside index.html), I see "Hello settingsController", so Angular is working.
But when clicking "Remote Settings" (using the remote view) I only see "{{vm.helloMsg}}"
How can I get the Angular controller to work in remote views?
Hi
(1) We need to show free text column value in Grid column, it might contain spaces, carriage return kind of text also to show in the grid column.
Any default support for it.
(2) Is there any way that we can fix row hight for the grid giving some fix size.
Regards,
Hitesh Taneja
Hi I have a complex application based on ASP.NET MVC and Angular in which I am trying to evaluating the kendo ui scheduler. I'm loading my JS files with RequireJS. When I load kendo.ui.min I get an error in the application when it attempts to get "scripts/jquery.min.js", this not where jquery lives in my app.
Now I've specified in require that kendo cannot be loaded until jquery is loaded, and it is definitely already loaded. So why is kendo requesting jquery from a location that doesn't even exist?If I don't load the kendo library there is no erroneous jquery file call.