angular-kendo
A project to create a robust set of Angular.js bindings for Kendo UI widgets
I have an api which return the date in this format "014-08-26T15:10:45.402Z" i am using angular kendo ui .The problem i am facing is the date is not getting bound to the kendo date picker.Could someone help me out .
<input kendo-date-picker ng-model="emp.datestart" k-format="MM/dd/yyyy" />
Source: (StackOverflow)
I want to have inline editing in my kendo-ui grid. Databinding seems to work fine but when I click the Update button after editing something the scope gets updated but the edit dialogs do not disappear. If a click on another edit button it gets into a defunct state. And after all it only does update the scope if I provide at least a dummy function as k-save. And for some reason clicking the Cancel button does update the scope. So the Cancel button does what I would expect from the Update button.
As you may see I want to update the local scope on client side and not send anything to any server.
Can somebody enlighten me about what is going wrong here?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" rel='nofollow' href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" rel='nofollow' href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" rel='nofollow' href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" rel='nofollow' href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
</head>
<body>
<div id="example" ng-app="gridTestApp" ng-controller="TestController">
<kendo-grid
k-data-source="gridData"
k-columns="gridColumns"
k-on-change="selected = data"
k-selectable="true"
k-editable="editableOptions"
k-schema="gridSchema"
k-save="saveFunction">
</kendo-grid>
<p ng-show="selected">
<label>Artist: <input ng-model="selected.artist" /></label>
<br />
<label>Track: <input ng-model="selected.track" /></label>
</p>
<p>This is for testing data-binding</p>
<ul>
<li data-ng-repeat="gridRow in gridData">
<input ng-model="gridRow.artist"></input><input ng-model="gridRow.track"></input>
<br>
</li>
</ul>
<p>This is for testing data-binding</p>
<ul>
<li data-ng-repeat="gridRow in gridData">
<span ng-bind="gridRow.artist"></span> -<span ng-bind="gridRow.track"></span>
<br>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script>
angular.module("gridTestApp",[ "kendo.directives" ])
.controller("TestController", function($scope){
$scope.gridData = new kendo.data.ObservableArray([
{ artist: "Pink Floyd", track: "The dark side of the Moon" },
{ artist: "The Beatles", track: "I've just seen a face" },
{ artist: "Queen", track: "Innuendo" }
]);
$scope.gridColumns = [
{ field: "artist", title: "Artist" },
{ field: "track", title: "Track" },
{ command: /*"destroy"*/["edit", "destroy"], title: " ", width: "175px", editable: "inline" }
];
$scope.editableOptions = {mode: "inline", update: true, destroy: true};
$scope.gridSchema = {
model: {
id: "artist",
fields: {
artist: { type: "string", validation: { required: true } },
track: { type: "string", validation: { required: true } }
}
}
}
$scope.saveFunction = function(){
console.log("somehting was modified");
}
});
</script>
</body>
</html>
I have created a plnkr for you.
Source: (StackOverflow)
I am new to kendo ui mobile wanted to know why I am getting this specific error:
Uncaught TypeError: Cannot read property 'useNativeScrolling' of undefined
The code in the view is as follows:
<ul kendo-mobile-list-view
k-data-source="xyz.list"
k-template="xyz.Template"
k-on-click="xyz.previewList(kendoEvent)"
k-use-native-scrolling="true"
data-endless-scroll="true"
></ul>
Source: (StackOverflow)
Is there any documentation or demo page of sorts which lists all the directives available for all the angular kendo controls. I figured out quite a few of them by prefixing "k-" as in "k-min","k-max" and giving a "-" after ever logical word as in kendo-drop-down-list etc. But this involves lot of trial and error and I am pretty much stuck with all grid events since none of the directives i give seem to work. If any one could point me to any such documentation or blog that would be great!Thanks a ton
PS: I have done a lot of searching on Google and couldn't find any such documentation/blog
Source: (StackOverflow)
Other JavaScript frameworks have complex UI widgets such as Treeviews, grids, and charts that include a lot of functionality inside of them.
Since I'm familiar with Kendo, I started using angular-kendo but found very little documentation and usage.
What does everyone use for UI frameworks in Angular? I'm looking for one UI framework to use with Angular, not a lot of different libraries and controls patched together.
Source: (StackOverflow)
I have a simple angular-kendo ComboBox on a page without an initially selected value. It should show the placeholder text in that case, but instead it's showing ? undefined:undefined ?
HTML
<select kendo-combo-box ng-model="Project" k-options='projectOptions'></select>
JS
app.controller('MyCtrl', function($scope) {
$scope.projectData = [
{name: 'Bob', value: 1},
{name: 'Tom', value: 2}
];
$scope.projectOptions = {
placeholder: "'Select...'",
dataTextField: 'name',
dataValueField: 'value',
dataSource: {
data: $scope.projectData
}
}
});
Here's a plunker that shows the problem. Can anyone spot the cause?
This used to work in an older version of angular-kendo, but it's not working in the current version.
Source: (StackOverflow)
Can someone please explain the logic behind angulars ability to detect Kendo's on-click events inside the scope without ng-model on the button?
<kendo-button on-click="clickWithoutNgModel()">Button</kendo-button>
$scope.clickWithoutNgModel = function () {
alert("Clicked without using ng-model on the button");
} // this works - how?
Source: (StackOverflow)
I´m using Kendo multiselect with Angular-Kendo directives and with remote datasource. I´m trying to set the selected items when the application starts but with no luck. Can anyone please help me?
See Code here: JS Bin
Source: (StackOverflow)
I am trying to use the angular-kendo scrollview and am clueless on how to start over it. Found a few examples on angular-kendo charts but none on angular-kendo scrollview. Need help!!
Thanks.
Source: (StackOverflow)
I placed a kendo-window in my html.
according to the docs, the window object should be available on the scope.
now, I want to bind a listener to the window's activate event from within a controller that is declared inside the window. i.e.:
markup:
<body ng-app="app">
<div kendo-window='potatoWindow'>
<div ng-controller='PotatoController'>
here
</div>
</div>
js:
var app = angular.module("app", ["ngRoute", "kendo.directives"]);
app.controller("PotatoController", function($scope){
$scope.potatoWindow.bind("activate",
function () {
console.log("potato");
});
});
... but the window object (potatoWindow) is not found on the $scope during the controller.
Qs:
- why is the window object not available? am i missing something?
- if there is no way to access the window object - is there a way to get the same results by other means?
Source: (StackOverflow)
I am working on a modified version of the Hot Towel template to create an Angular SPA. I am using Breeze to access my data services with kendo UI and data viz for widgets and charts.
I am facing a similar issue to the one stated in this SO post Chrome//kendoUI/jQuery: Maximum call stack size exceeded. On binding my breeze service output directly to my chart, I get a Maximum Call Stack Size exceeded error on the client with 'Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!Watchers fired in the last 5 iterations: []'
Breeze results do have circular references as the link above also indicates. I receive no issues on binding this to normal angular scope variables, but the error occurs only upon binding this to my charts. Filtering data on the client as the link suggests probably will have a performance impact. I tried a couple of replacer functions and JSON.prune as well, but they remove the data that I need to display on the charts as well :(
Is there any other fix for this?
The complete error is pasted below. Looks as though a deep copy is being performed for each property, but since there are circular references, it ends up throwing an overflow error
RangeError: Maximum call stack size exceeded
at Object.toString (native)
at isArray (http://localhost:61438/Scripts/angular.js:596:19)
at isArrayLike (http://localhost:61438/Scripts/angular.js:278:27)
at forEach (http://localhost:61438/Scripts/angular.js:324:16)
at copy (http://localhost:61438/Scripts/angular.js:871:7)
at copy (http://localhost:61438/Scripts/angular.js:858:23)
at copy (http://localhost:61438/Scripts/angular.js:875:28)
at copy (http://localhost:61438/Scripts/angular.js:858:23)
at copy (http://localhost:61438/Scripts/angular.js:875:28)
at copy (http://localhost:61438/Scripts/angular.js:858:23) angular.js:9778
(anonymous function) angular.js:9778
(anonymous function) angular.js:7216
Scope.$digest angular.js:12270
(anonymous function) angular.js:12450
completeOutstandingRequest angular.js:4300
(anonymous function)
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.2.16/$rootScope/infdig?p0=10&p1=%5B%5D angular.js:78
(anonymous function) angular.js:78
Scope.$digest angular.js:12290
(anonymous function) angular.js:12450
completeOutstandingRequest angular.js:4300
(anonymous function)
Source: (StackOverflow)
I have this code for my schema:
schema: {
model: {
fields: {
col1: {
type: "string", editable: true, nullable: false,
validation:{ required: { message: "Name is Required." } }
},
col2: {
type: "string", editable: true, nullable: false,
validation:{ required: { message: "Please Select a Main Language." } }
},
col3:{
type: "Array[]", editable: true, nullable: false,
validation:{ required: { message: "Please Select Supported Language(s)." } }
},
col4: {
type: "string", editable: false, nullable: true
},
col5: {
type: "string", editable: false, nullable: true
}
}
}
}
Columns code snippet
{
field: "col4",
title: "Column4",
width:"200px",
editable:false,
nullable: true
},
{
field: "col5",
title: "Column5",
width:"200px",
editable:false,
nullable: true
}
I would like to disable the last two (status and unlocalized count). As you can see I have already used the editable and nullable. My goal is to send an HTTP post without the two which has this JSON format
{"col1":"string", "col2":"string","col3":["string"]}
Source: (StackOverflow)
I have 2 Kendo pie charts. For the sake of simplicity lets assume the same charts. I just want to align them next to each other in a Bootstrap panel. I am using angular-kendo directives for the pie charts.
Here is the code I wrote, but instead of aligning side by side, I am getting one chart reduced to a small size in the next row.
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div kendo-chart k-options="pie" k-data-source="countries" />
</div>
<div class="col-lg-6">
<div kendo-chart k-options="pie" k-data-source="countries" />
</div>
</div>
</div>
</div>
I have defined the data-source and pie options in the controller code:
$scope.pie = {
title: {
position: "bottom",
text: "WLAN"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: #= value#%",
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category",
padding: 100
}],
tooltip: {
visible: true,
format: "{0}%"
}
};
$scope.countries = {
data: [
{
category: "blizzard",
value: 53.8,
color: "#9de219"
}, {
category: "alpha",
value: 16.1,
color: "#90cc38"
}, {
category: "hurricane",
value: 11.3,
color: "#068c35"
},
]
};
Source: (StackOverflow)
I can't figure out what is going on here. I'm trying to make a custom directive for grids and will use element attributes to customize a given instance. In doing so i've made two files
grid-controller.js
app.controller('gridController', ['$scope', function ($scope ) {
//Initilization code
$scope.gridOptions = {
//Setup options
};
$scope.detailOptions = function (e) {
console.log('winning');
return {
dataSource: {
transport: {
read: {
url: "/detail" + e.OrderNumber + ".json",
dataType: 'json'
}
},
error: function (e) {
console.log(e);
},
pageSize: true,
serverPaging: false,
serverFiltering: false,
serverSorting: false,
},
columns: [
{
field: "ItemCode",
label: "lblItemCode",
title: ""
}, {
field: "ItemDesc",
label: "lblItemDesc",
title: ""
}, {
field: "QuantityOrdered",
label: "lblQuantityOrdered",
title: ""
}
],
scrollable: false,
sortable: true
};
}
}]);
grid-directive.js
app.directive('grid', function () {
return {
// Restrict E for element
restrict: 'E',
// Here we setup the template for the code we want to replace our directive
template: "<div> \n\
<div kendo-grid='grid' \n\
k-options='gridOptions'\n\
k-data-source='dataSource'>\n\
</div> \n\
<script type='text/x-kendo-template'\n\
id='details'>\n\
<div kendo-grid >\n\
</div>\n\
</script>\n\
</div>",
replace: true,
scope: {
},
controller: "gridController",
link: function (scope, element, attrs) {
//Gather some attribute data and set it to the gridOptions object
if(scope.$eval(attrs.detailsGrid))
{
scope.gridOptions.detailTemplate = kendo.template($("#details").html());
scope.gridOptions.detailInit = scope.detailOptions;
}
//More customization code
scope.dataSource = new kendo.data.DataSource({
//Setup dataSource options for main grid
});
}
};
});
For sake of brevity i've excluded a lot of the extra code.
My problem is whenever I try to open the details of a row the row opens...closes...and the grid appears to refresh. It almost looks like something is crashing and the main grid is refreshing as a result.
Here is the associated plunkr with the commented portions fleshed out.
Source: (StackOverflow)
I'm trying to make a Kendo Grid that has 2 foreign key columns using the Angular directives for Kendo. I am able to get one to work, but not the other (independent of each other). If I comment one out the other will work and vice versa, but either way only one will work. Abbreviated sample code is below.
invoicesController.js
app.controller('invoicesController', [
'$scope', '$rootScope', 'config', 'dataFactory', function($scope, $rootScope, config, dataFactory) {
$rootScope.title = 'Invoices';
$scope.filterCustomers = [];
$scope.filterStatuses = [];
$scope.invoiceGrid = null;
var _refreshCustomers = function () {
dataFactory.get(_.string.format('{0}customers', config.apiUrl)).success(function (result) {
$scope.filterCustomers = _.map(result, function (cust, key) {
return {
text: cust.name,
value: cust.id
}
});
});
};
var _refreshStatuses = function() {
dataFactory.get(_.string.format('{0}invoicestatuses', config.apiUrl)).success(function(result) {
$scope.filterStatuses = _.map(result.data, function(status, key) {
return {
text: status.name,
value: status.id
}
});
_initializeGrid();
});
};
var _refreshData = function () {
_refreshCustomers();
_refreshStatuses();
};
_refreshData();
var _initializeGrid = function() {
$scope.invoiceGrid = {
dataSource: {
transport: {
read: _.string.format('{0}invoices', config.apiUrl),
},
schema: {
data: 'data'
},
pageSize: 15,
sort: { field: 'invoiceDate', dir: 'asc' }
},
columns: [
{ title: 'Subject', field: 'subject', type: 'string', width: '30%'},
{ title: 'Number', field: 'number', width: '12%' },
{ title: 'Customer', field: 'customer.id', values: $scope.filterCustomers, width: '15%' },
{ title: 'Status', field: 'status.id', values: $scope.filterStatuses, width: '14%' },
{ title: 'Total', field: 'invoiceTotal', type: 'number', format: '{0:c2}', width: '10%' },
{
title: 'Updated', field: 'updatedOn', type: 'date', format: '{0:d}', width: '19%',
template: '#=lastUpdated#'
}
],
scrollable: false,
sortable: true,
filterable: true,
pageable: true
};
}
}
]);
dataFactory.js (GET method)
return $http({
url: url,
method: 'GET',
data: data,
});
list.html
<div data-kendo-grid data-k-ng-delay="invoiceGrid" data-k-options="invoiceGrid" class="top"></div>
Source: (StackOverflow)