Telerik Forums
Kendo UI Integration Forum
3 answers
125 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
1 answer
151 views

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 ?

Dimo
Telerik team
 answered on 20 Apr 2016
3 answers
187 views
I have an angular application that runs fine on the web and in ripple but the following error on my android device and in the android emulator:

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>
Patrick
Top achievements
Rank 1
 answered on 08 Apr 2016
3 answers
89 views

 

 

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>
 
  <!-- the application CSS file -->
 
  <script src="http://code.jquery.com/jquery-1.9.1.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>

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

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

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

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

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

Patrick
Top achievements
Rank 1
 answered on 05 Apr 2016
2 answers
201 views

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;
}

Joel
Top achievements
Rank 1
Iron
 answered on 04 Apr 2016
3 answers
192 views
Do you have a sample mobile Kendo web app that uses ServiceWorker (http://www.html5rocks.com/en/tutorials/service-worker/introduction/)?
Petyo
Telerik team
 answered on 25 Mar 2016
5 answers
114 views
How can I optimize the performance of the combobox with datasourse = 2.5k items? Data entry noticeable delay, java script blocks in the browser search time elements
Venelin
Telerik team
 answered on 17 Mar 2016
1 answer
134 views

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?

Matthias
Top achievements
Rank 1
 answered on 16 Mar 2016
3 answers
327 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

Boyan Dimitrov
Telerik team
 answered on 10 Mar 2016
9 answers
333 views

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.

Matthew
Top achievements
Rank 1
 answered on 04 Mar 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?