Kendo UI + Angular - v2014.2.903 vs v2014.3.1119 JSFiddle Issues - angularjs

I am working on upgrading one of my Angular/Kendo UI projects from v2014.2.903 to v2014.3.1119. I have encountered a few instances where v2014.3.1119 breaks functionality that worked fine in v2014.2.903. I decided to create a couple JSFiddles to illustrate the issues, but unfortunately, the JSFiddle that points to v2014.2.903 doesn't seem to even recognize Kendo UI.
v2014.3.1119 JSFiddle (this works) ... http://jsfiddle.net/lejuan5150/w0711rdg/
v2014.2.903 JSFiddle (this doesn't work) ... http://jsfiddle.net/lejuan5150/4svqnaz6/
Both contain the same code and configuration aside from the version of Kendo UI they are referencing. Here is the code:
HTML:
<div>
<div data-ng-controller="personController">
<div
kendo-grid="personGrid"
k-options="personGridOptions"
k-ng-delay="personGridOptions">
</div>
<br />
First Name Combo Box:
<select
kendo-combo-box="firstNameComboBox"
k-options="firstNameComboBoxOptions"
k-ng-delay="firstNameComboBoxOptions"
k-ng-model="selectedPerson.firstName"
></select>
<br />
Last Name Combo Box:
<select
kendo-drop-down-list="lastNameDropDownList"
k-options="lastNameDropDownListOptions"
k-ng-delay="lastNameDropDownListOptions"
k-ng-model="selectedPerson.lastName"
></select>
</div>
JavaScript:
var app = angular
.module("app", [
"kendo.directives"
]);
app.controller("personController", [
"$scope",
personController
]);
function personController(
$scope
){
init();
function init(){
var personData = [{
firstName: "Joe",
lastName: "Smith",
status: "Active"
},{
firstName: "John",
lastName: "Smith",
status: "Active"
},{
firstName: "Travis",
lastName: "Smith",
status: "Expired"
}];
$scope.personDataSource = new kendo.data.DataSource({
data: personData
});
$scope.firstNamesData = [{
id: "Joe",
firstName: "Joe"
},{
id: "George",
firstName: "George"
},{
id: "John",
firstName: "John"
},{
id: "Travis",
firstName: "Travis"
}];
$scope.lastNamesData = [{
id: "Jones",
lastName: "Jones"
},{
id: "Smith",
lastName: "Smith"
}];
bindPersonGrid();
bindFirstNameComboBox();
bindLastNameDropDownList();
}
function bindPersonGrid(){
$scope.personGridOptions = {
dataSource: $scope.personDataSource,
selectable: "row",
dataBound: onPersonGridDataBound,
change: onPersonGridRowSelected
}
}
function onPersonGridDataBound(){
var grid = this;
var firstRow = grid.element.find("tbody tr:first");
grid.select(firstRow);
}
function onPersonGridRowSelected(
event
){
var grid = event.sender;
$scope.selectedPerson = grid.dataItem(grid.select());
$scope.$digest();
}
function bindFirstNameComboBox(){
$scope.firstNameComboBoxOptions = {
dataSource: $scope.firstNamesData,
dataTextField: "firstName",
dataValueField: "id"
};
}
function bindLastNameDropDownList(){
$scope.lastNameDropDownListOptions = {
dataSource: $scope.lastNamesData,
dataTextField: "lastName",
dataValueField: "id"
};
}
}
Does anyone know why the v2014.2.903 JSFiddle doesn't work?

I found the issue. Kendo v2014.2.903 doesn't like k-ng-delay when using a hard coded array of JavaScript objects.

Related

Accessing an array within an array (ng-repeat)

I have a data structure like this:
[
{firstName: "John",
secondName: "Smith",
children: ["Fred", "Hannah"]
},
{firstName: "Daniel",
secondName: "Evans",
children: ["Maggie", "Eddie", "Maria"]
}
]
I want to use ng-repeat to return the CHILDREN of each person object, in a continuous list.
Like so:
<ul>
<li>Fred</li>
<li>Hannah</li>
<li>Maggie</li>
<li>Eddie</li>
<li>Maria</li>
</ul>
Can anyone help?
You could reduce your data structure before presenting it to the ng-repeat.
var app = angular.module('myApp', [
'my.controllers'
]);
var controllers = angular.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
var people = [{
firstName: "John",
secondName: "Smith",
children: ["Fred", "Hannah"]
}, {
firstName: "Daniel",
secondName: "Evans",
children: ["Maggie", "Eddie", "Maria"]
}, {
firstName:"Childless",
secondName: "Parent"
},
{
firstName:"Jeff",
secondName: "Pasty",
children: ["Mike"]
}];
$scope.allChildren = people.reduce(function(a, b) { return a.concat(b.children) },[]);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyController">
<div ng-repeat='child in allChildren'>{{ child }}</div>
</div>
</div>

Bind Kendo UI grid dataSource to combobox

I have a Kendo UI grid that contains Name Objects, when I select a row I want to populate a form below. Currently the text inputs and date-picker work fine. But I combo box only has one way binding. I can change the value in the grid, but when I select a new row the value of the combobox doesnt change.
HTML
<div id="nd-names-tab" ng-controller="nd-names-controller">
<div id="nd-names-grid-section">
<div id="nd-names-grid"
kendo-grid="namesGrid"
k-data-source="namesData"
k-columns="nameGridColumns"
k-selectable="true"
k-reorderable="true"
k-on-change="selectedName = data"
k-toolbar="[
{ 'name': 'addName', template: '<button data-ng-click=\'addName()\' class=\'k-button\'>Add</button>' },
{ 'name': 'deleteName', template: '<button data-ng-click=\'deleteName()\' class=\'k-button\'>Delete</button>' }
]" >
</div>
</div>
<div id="nd-names-input-section">
<label>Name: <input type="text" class="k-textbox" ng-model="selectedName.lname"/></label>
<input type="text" class="k-textbox" ng-model="selectedName.fname" /> <br/>
<label>DOB: <input id="datepicker" ng-model="selectedName.dob"/></label>
<label>Gender: <input id="gender" ng-model="selectedName.gender"/></label> <br />
<label>Address: <input type="text" class="k-textbox" style="width: 200px" ng-model="selectedName.addr"/></label>
</div>
</div>
JS File
$("#datepicker").kendoDatePicker({
format: "dd/MM/yyyy"
});
$("#gender").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Male", value: "Male" },
{ text: "Female", value: "Female" },
],
filter: "contains",
suggest: true
});
Angular Controller
app.controller('nd-names-controller', function($scope){
$scope.namesData = new kendo.data.ObservableArray([
{ fname: 'Joe', lname: 'Clark', addr: '1565 Main Rd.', dob: '14/08/1990', gender: 'Male'},
{ fname: 'Bob', lname: 'Smith', addr: '123 Main St.', dob: '23/03/1992', gender: 'Male'},
{ fname: 'Jane', lname: 'Smith', addr: '123 Main St.', dob: '25/06/1991', gender: 'Female'},
{ fname: 'Jane', lname: 'Smith', addr: '123 Main St.', dob: '25/06/1991', gender: 'Female'},
{ fname: 'Jane', lname: 'Smith', addr: '123 Main St.', dob: '25/06/1991', gender: 'Female'}
]);
$scope.nameGridColumns = [
{field: "fname", title: "First Name", width: "*" },
{field: "lname", title: "Last Name", width: "*" },
{field: "addr", title: "Address", width: "*" },
{field: "dob", title: "DOB", width: "*" },
{field: "gender", title: "Gender", width: "*" }
];
$scope.addName = function(e){
this.namesGrid.dataSource.add( { fname: '', lname: '', addr: '', dob: '', gender: ''} );
}
});
I am not sure how I am suppose to use angular to two way bind a combo box.
You are declaring the kendo combobox using Jquery. Instead create an options in you controller and pass it to kendo directive.
Directive:
<select id="slots" kendo-drop-down-list k-options="slotsOptions" style="width: 200px"></select>
In you angular controller
var dataSlotDuration = [
{ text: "10", value: "10" },
{ text: "15", value: "15" },
{ text: "20", value: "20" },
{ text: "30", value: "30" },
{ text: "60", value: "60" }
];
function onSelectSlotDuration(e) {
var dataItem = this.dataItem(e.item.index());
// this is the seled value from drop-drop-list
$scope.selectedSlotDuration = dataItem.value;
}
$scope.slotsOptions = {
dataSource: {
data: dataSlotDuration
},
dataTextField: "text",
dataValueField: "value",
optionLabel: "Choose Slot Duration...",
select: onSelectSlotDuration
}
Its in the Kendo Docs

Use angular binding with kendo grid templates

I use kendo ui grid with angular. I want the grid to be updated with every change in the array (of any property). Meaning, if my data is:
this.rowData = [{ id: "1", name: "A", age: "16" }, { id: "2", name: "B", age: "42" }];
and the age is changed from 16 to 17 I want the grid to be updated automatically.
I understand that I can use ObservableArray and when updating the observable the grid will be updated but I don't want the entire application to know the observable. I want to be able to update the original rowData and affect the grid. Any suggestions of how I do that?
I thought that adding a template to a row or a specific column with angular binding will help but it didn't, here is an example of it:
function Controller(GridConstants) {
this.rowData = [{ id: "1", name: "A", age: "16" }, { id: "2", name: "B", age: "42" }];
this.gridDataSource = new kendo.data.DataSource({
data: new kendo.data.ObservableArray(this.rowData),
schema: {
model: { id: "id" }
}
});
this.gridOptions = {
dataSource: this.gridDataSource,
selectable: "row",
columns: [
{
field: "name",
title: "Name"
},
{
field: "age",
title: "Age",
template: "<label>{{dataItem.age}}</label>"
}
],
selectable: "single"
};
}
You can try ng-bind instead:
template: "<label ng-bind='dataItem.age'></label>"
var rowDataObservable = new kendo.data.ObservableArray(this.rowData);
...
data: rowDataObservable,
...
//and you need work with rowDataObservable, this will work
rowDataObservable[0].age = 17;

kendo ui angularjs grid edit

I'm doing a POC for AngularJS and Kendo UI and I need to know how to save updated data on a kendo grid. I have inline editing enabled but can't hook into kendo UI to get the updated data. I created a fiddle (http://jsfiddle.net/aMz7V/14/) but can't get the jsfiddle to work (sorry this is my first time creating a fiddle), so I have pasted the code below:
JavaScript (controller code):
var myApp = angular.module('myApp', ['kendo.directives']);
myApp.controller("gridCtrl", function($scope) {
$scope.assignments = {};
$scope.assignments.dataSource = new kendo.data.DataSource({
data: [
{ StudentName: "John Smith", HomeWork: 9, HomeWork1: 12 },
{ StudentName: "Kodjo Adu", HomeWork: 5, HomeWork1: 15 },
{ StudentName: "Patrick smith", HomeWork: 10, HomeWork1: 19 },
{ StudentName: "Richard lomax", HomeWork: 8, HomeWork1: 18 },
{ StudentName: "Aglade Bone", HomeWork: 7, HomeWork1: 20 }
],
schema: {
model: {
fields: {
StudentName: { type: "string" },
HomeWork: { type: "number" },
HomeWork1: { type: "number" },
}
}
},
pageSize: 3,
});
$scope.assignments.columns = [
{ field: 'StudentName', title: 'Student Name' },
{ field: 'HomeWork', title: 'Home Work / 10' },
{ field: 'HomeWork1', title: 'Home Work / 20' }
];
});
HTML:
<div ng:app="myApp">
<div ng-controller='gridCtrl'>
<div kendo-grid k-data-source="assignments.dataSource" k-selectable="'row'"
k-pageable='{ "refresh": true, "pageSizes": true }'
k-columns='{{assignments.columns}}' k-sortable="true" k-editable="true" k-toolbar="['save','cancel']"></div>
</div>
</div>
So i figured it out, to handle to the save changes event i needed to do this
k-on-save-changes="saveChanges(kendoEvent)"
and just add the saveChanges function to the $scope in the controller.

How can I get my ng-grid to re-sort itself?

I have some data displayed in an ng-grid.
Some of this data is displayed nearly immediately after the page loads; other data is slower and we stitch it in once it's received.
In doing this, sorting can break if the grid is set to sort data that isn't there when the first half of the data is rendered in the grid.
Is there a nice way to tell the grid to re-sort itself and preserve multiple columns as well as sort directions once all of the data has been received?
JS
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 43},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: "name", },
{ field: "age" },
{ field: "state" }],
sortInfo: {
fields: [ 'age', 'state' ],
directions: [ 'asc', 'desc' ]
}
};
var lateData = [
{ name: 'Moroni', state: 'NY' },
{ name: 'Tiancum', state: 'CA' },
{ name: 'Jacob', state: 'PA' },
{ name: 'Nephi', state: 'AK' },
{ name: 'Enos', state: 'MO' }
];
setTimeout(function () {
$scope.myData = _.merge($scope.myData, lateData);
$scope.$digest();
}, 3000);
});
HTML
<div ng-app="myApp">
<div ng-controller = "MyCtrl">
<div ng-grid="gridOptions" class="gridStyle"></div>
</div>
</div>
CSS
.gridStyle {
border: 1px solid rgb(212, 212, 212);
width: 100%;
height: 500px;
}
http://jsfiddle.net/akukucka/4vrQq/
Not sure if this is what you wanted:
$scope.resort= function(){
$scope.gridOptions.sortBy('age');
};
Plunker is here
Since I don't have any of your code you have to find a place where/when to do the sorting for yourself.

Resources