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
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.
I have been battling an issue during my current ticket and the last several tickets I've worked on where I'm at now. I've only been here for about seven months now and we're a WebForms shop. But our recent adoption of Kendo UI (coupled with my ASP.NET MVC background) has forced me to adapt and manipulate the Page Life Cycle to mimic MVC, especially when retrieving JSON for the kendoChart and kendoGrid. I'm able to do my work but it's slow because I find myself combating the RadControls we use.
The RadControl that is shown on every page is the RadMenu in the MasterPage. Just using the MasterPage results in most of my pure HTML5 becoming mangled by Telerik UI for ASP.NET AJAX.
For example, since MSIE doesn't support input[type="number"], I resorted to kendoNumericTextBox, but when that runs the ASP.NET AJAX client-side scripts transform my HTML and add classes that wreck the styling.
The two frameworks are definitely not compatible. Or at least they are semi-compatible.
I ended up dynamically adding the inputs in the ready() event, calling kendoNumericTextBox() on them, and then spawning off an interval to check when the rfdDecorated class gets added to them so I can remove the class from them and their siblings. It does work, but it's messy, and trying to get around the ASP.NET AJAX framework when using Kendo UI is a pain.
Any ideas on how to make this situation better? My initial thought was to get rid of the RadMenu altogether because that's definitely what is causing the issue. There's a kendoMenu that looks and feels pretty much exactly like the RadMenu does but with obviously a lot less overhead. But pitching that idea to management would not be very easy because I believe they're too comfortable with the RadControls.
This is a strategy question and any input would be greatly appreciated.