Telerik Forums
Kendo UI Integration Forum
13 answers
2.5K+ views
Hi

After Save the data into data base using grid kendo ui, how to print the notification message on screen using Spring +kendo ui
How it possible and how can i do?


Thanks
Vladimir Iliev
Telerik team
 answered on 24 Oct 2016
2 answers
119 views

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:

  1. (anonymous function)                                       @ VM13474:3
  2. render                                                               @ kendo.all.min.js:25
  3. proxy                                                                 @ jquery.js:512
  4. createCheckBoxes                                            @ kendo.all.min.js:43
  5.  refresh                                                               @ kendo.all.min.js:43
  6. options.forceUnique.checkChangeHandler       @ kendo.all.min.js:43
  7. trigger                                                                 @ kendo.all.min.js:25
  8. _process                                                             @ kendo.all.min.js:28
  9. success                                                               @ kendo.all.min.js:27
  10. success                                                               @ kendo.all.min.js:27
  11. n.success                                                            @ kendo.all.min.js:27
  12. fire                                                                       @ jquery.js:3099
  13. fireWith                                                                @ jquery.js:3211
  14. done                                                                    @ jquery.js:8264
  15. (anonymous function)                                         @ jquery.js:8605

We have included angularjs 1.2.29, jquery 1.7.1 and jquery-ui 1.10.1

 

Thanks

Onlineprinters
Top achievements
Rank 1
 answered on 13 Sep 2016
5 answers
138 views

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

Alex Hajigeorgieva
Telerik team
 answered on 23 Aug 2016
1 answer
185 views

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": {}
  },

Daní
Top achievements
Rank 1
 answered on 27 Jul 2016
1 answer
244 views

Gantt chart

1. How can  I enable filtering and groupable option in gannt.
2. How can I enable Pagination
3. How can I add multiple task in same resource

Boyan Dimitrov
Telerik team
 answered on 22 Jun 2016
4 answers
448 views
I need to specify the width of the dropdown. Is there a way to do this in angular?
Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 15 Jun 2016
3 answers
79 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
108 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
109 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
55 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?