Telerik Forums
Kendo UI Integration Forum
1 answer
142 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
166 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
75 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
182 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
178 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
104 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
119 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
310 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
298 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
5 answers
591 views

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.

Marin Bratanov
Telerik team
 answered on 01 Mar 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?